@stacksjs/defaults 0.72.50 → 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.50",
+  "version": "0.72.54",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,12 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.72.50",
+  "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.50",
+    "@stacksjs/mobile": "^0.72.54",
     "@stacksjs/sanitizer": "^0.2.113"
   },
   "scripts": {

package/resources/layouts/404.stx

@@ -26,7 +26,9 @@ const backgroundImage = props.backgroundImage || '/svgs/404.svg'
         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/errors/404.stx

@@ -10,6 +10,8 @@
 // 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">
@@ -18,7 +20,11 @@
   <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>
 
-    <div class="my-6 h-1 w-14 bg-blue-600 dark:bg-blue-500 rounded-full"></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>
 

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'