@stacksjs/defaults 0.70.358 → 0.70.362

package/ai/skills/stacks-browse/SKILL.md

@@ -114,10 +114,10 @@ Use `{"action":"assert","selector":"button","text":"Save","focused":true}` to ve
 
 ### Crawl (whole-site browser audit)
 ```bash
-bun storage/framework/defaults/ai/skills/stacks-browse/scripts/browse.ts crawl <url> [--viewport 1280x900] [--max 500] [--path /extra-route] [--settle 350] [--progress]
+bun storage/framework/defaults/ai/skills/stacks-browse/scripts/browse.ts crawl <url> [--viewport 1280x900] [--max 500] [--path /extra-route] [--settle 350] [--progress] [--summary]
 ```
-Uses a fresh isolated page target per route, relaunching Chromium if its DevTools
-session exits during a long audit, while
+Uses a fresh isolated page target per route, waits for each target to fully close,
+and relaunches Chromium if its DevTools session or target lifecycle fails during a long audit, while
 following every same-origin link it discovers.
 The viewport is deterministic and defaults to `1280x900`; pass `--viewport 768x1024`
 to repeat the same route audit at a tablet breakpoint.
@@ -125,7 +125,8 @@ Each page is checked for a non-200 document, console exceptions, failed
 requests, and horizontal overflow. Repeat `--path` to seed routes that are not
 linked from the starting page. The command prints every crawled path and exits
 nonzero when any page fails. Add `--progress` to stream each completed page
-during a long audit.
+during a long audit. Add `--summary` to report totals and compact failure
+diagnostics without printing every visited path or overflowing element.
 
 ## Stacks-Specific QA
 

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

@@ -264,12 +264,38 @@ async function createPage(port: number): Promise<BrowserPage> {
   }
 }
 
-async function closePage(port: number, page: BrowserPage): Promise<void> {
-  page.cdp.close()
+async function closePage(port: number, page: BrowserPage): Promise<boolean> {
   try {
-    await fetch(`http://127.0.0.1:${port}/json/close/${encodeURIComponent(page.targetId)}`)
+    const response = await fetch(`http://127.0.0.1:${port}/json/close/${encodeURIComponent(page.targetId)}`)
+    if (!response.ok) {
+      page.cdp.close()
+      return false
+    }
+  }
+  catch {
+    page.cdp.close()
+    return false
+  }
+  page.cdp.close()
+
+  // Chromium acknowledges target closure before every renderer/helper has
+  // actually left the target list. Creating the next target immediately can
+  // accumulate closing renderers across a large crawl, eventually dropping
+  // Network and Runtime events. Wait for the target to disappear so each route
+  // starts with the isolation the command promises.
+  for (let attempt = 0; attempt < 40; attempt++) {
+    try {
+      const targets = await (await fetch(`http://127.0.0.1:${port}/json/list`)).json() as any[]
+      if (!targets.some(target => target.id === page.targetId))
+        return true
+    }
+    catch {
+      return false
+    }
+    await Bun.sleep(25)
   }
-  catch { /* the target or browser may already have closed */ }
+
+  return false
 }
 
 function kill(s: Session): void {
@@ -864,7 +890,11 @@ async function main() {
         }
       }
       const replacePage = async (): Promise<void> => {
-        await closePage(session.port, browserPage)
+        const closed = await closePage(session.port, browserPage)
+        if (!closed) {
+          kill(session)
+          session = await launch()
+        }
         browserPage = await createReplacementPage()
         cdp = browserPage.cdp
       }
@@ -1019,6 +1049,16 @@ async function main() {
         || page.consoleErrors.length > 0
         || page.failedRequests.length > 0
         || page.horizontalOverflowPx > 0)
+      const summaryOnly = Boolean(flags.summary)
+      const reportedFailures = summaryOnly
+        ? failures.map(page => ({
+            path: page.path,
+            status: page.status,
+            consoleErrorCount: page.consoleErrors.length,
+            failedRequestCount: page.failedRequests.length,
+            horizontalOverflowPx: page.horizontalOverflowPx,
+          }))
+        : failures
       console.log(JSON.stringify({
         start: start.href,
         browser: session.browser,
@@ -1026,8 +1066,9 @@ async function main() {
         crawled: pages.length,
         remaining: queue.length,
         max,
-        paths: pages.map(page => page.path),
-        failures,
+        failureCount: failures.length,
+        ...(!summaryOnly ? { paths: pages.map(page => page.path) } : {}),
+        failures: reportedFailures,
       }, null, 2))
       if (failures.length > 0)
         process.exitCode = 1

package/app/Actions/AI/AskAction.ts

@@ -1,16 +1,15 @@
+import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions'
 import { ask } from '@stacksjs/ai'
+import { log } from '@stacksjs/logging'
+import { response } from '@stacksjs/router'
 import { schema } from '@stacksjs/validation'
 
-// TODO: this should have been auto-generated
-interface Request {
-  question: string
-}
-
 export default new Action({
   name: 'AiAskAction',
   description: 'Ask AI',
   method: 'POST',
+  apiResponse: true,
 
   validations: {
     question: {
@@ -19,22 +18,18 @@ export default new Action({
     },
   },
 
-  async handle(request: Request) {
-    try {
-      const question = request.question
-
-      console.log(`Question received: ${question}`)
+  async handle(request: RequestInstance) {
+    await request.validate()
+    const question = String(request.get('question') || '').trim()
 
-      return {
+    try {
+      return response.json({
         data: await ask(question),
-      }
+      })
     }
     catch (error) {
-      console.error('Error:', error)
-
-      return {
-        error: 'An error occurred while processing your request.',
-      }
+      log.error('[ai] Ask request failed', { error })
+      return response.json({ message: 'The AI provider could not answer the question.' }, 502)
     }
   },
 })

package/app/Actions/AI/SummaryAction.ts

@@ -1,16 +1,15 @@
+import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions'
 import { summarize } from '@stacksjs/ai'
+import { log } from '@stacksjs/logging'
+import { response } from '@stacksjs/router'
 import { schema } from '@stacksjs/validation'
 
-// TODO: this should have been auto-generated
-interface Request {
-  text: string
-}
-
 export default new Action({
   name: 'AiSummaryAction',
   description: 'Summary AI',
   method: 'POST',
+  apiResponse: true,
 
   validations: {
     text: {
@@ -19,22 +18,18 @@ export default new Action({
     },
   },
 
-  async handle(request: Request) {
-    try {
-      const text = request.text
-
-      console.log(`Text received: ${text}`)
+  async handle(request: RequestInstance) {
+    await request.validate()
+    const text = String(request.get('text') || '').trim()
 
-      return {
+    try {
+      return response.json({
         data: await summarize(text),
-      }
+      })
     }
     catch (error) {
-      console.error('Error:', error)
-
-      return {
-        error: 'An error occurred while processing your request.',
-      }
+      log.error('[ai] Summary request failed', { error })
+      return response.json({ message: 'The AI provider could not summarize the text.' }, 502)
     }
   },
 })

package/app/Actions/LogAction.ts

@@ -1,15 +1,16 @@
+import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions'
 import { log } from '@stacksjs/logging'
+import { response } from '@stacksjs/router'
 import { schema } from '@stacksjs/validation'
 
-interface Request {
-  message: string
-  level: 'info' | 'warn' | 'error'
-}
+type LogLevel = 'info' | 'warn' | 'error'
 
 export default new Action({
   name: 'Dummy Logger',
   description: 'This action is used to demo how to POST to a server and upon success, log a message.',
+  method: 'POST',
+  apiResponse: true,
 
   // the request object is optional, but if it is provided, it will be used for validation
   validations: {
@@ -29,14 +30,13 @@ export default new Action({
     },
   },
 
-  // handle(request: { message: string, level: 'info' | 'warn' | 'error' }) {
-  handle(request?: Request) {
-    if (!request)
-      return 'No request was provided.'
+  async handle(request: RequestInstance) {
+    await request.validate()
 
-    // TODO: need to validate with ts-validation
-    log[request.level](request.message)
+    const message = String(request.get('message') || '').trim()
+    const level = String(request.get('level')) as LogLevel
+    log[level](message)
 
-    return `Logged "${request.message}" at "${request.level}" level`
+    return response.json({ level, message: `Logged at ${level} level.` })
   },
 })

package/ide/vscode/package.json

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.70.358",
+  "version": "0.70.362",
   "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",

package/resources/components/Dashboard/Marketing/CampaignDeleteDialog.stx

@@ -6,17 +6,16 @@ const record = useReactiveProp('record', null as CampaignRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `The persisted campaign ${record()?.name || ''} will be permanently removed. Campaigns with delivery history are retained.`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete campaign dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="campaign-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="campaign-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete campaign?</h2>
-    <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">The persisted campaign <strong>{{ record()?.name || '' }}</strong> will be permanently removed. Campaigns with delivery history are retained.</p>
-    <div :if="error()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
-    <div class="flex gap-2 justify-end mt-6">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete campaign</Button>
-    </div>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete campaign?"
+  :description="description()"
+  confirmLabel="Delete campaign"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Marketing/MarketingListDeleteDialog.stx

@@ -6,20 +6,20 @@ const record = useReactiveProp('record', null as MarketingListRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const protectedRecord = derived(() => Boolean(record()?.subscriberCount) || Boolean(record()?.campaignCount))
+const description = derived(() => protectedRecord()
+  ? `${record()?.name || 'This email list'} has membership or campaign history. Archive it instead to preserve relationships.`
+  : `${record()?.name || 'This email list'} will be permanently removed.`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete email list dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="marketing-list-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="marketing-list-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete email list?</h2>
-    <p class="mt-2 text-gray-600 text-sm dark:text-neutral-300"><span class="font-medium">{{ record()?.name }}</span> will be permanently removed.</p>
-    <p :if="record()?.subscriberCount || record()?.campaignCount" class="mt-3 p-3 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 rounded-lg">This list has membership or campaign history. Archive it instead to preserve relationships.</p>
-    <p :if="error()" role="alert" class="mt-3 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 rounded-lg">{{ error() }}</p>
-    <footer class="flex gap-2 justify-end mt-6">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :disabled="busy() || Boolean(record()?.subscriberCount) || Boolean(record()?.campaignCount)" :loading="busy()" variant="danger" @click="emit('confirm')">
-        Delete email list
-      </Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete email list?"
+  :description="description()"
+  confirmLabel="Delete email list"
+  :busy="busy()"
+  :disabled="protectedRecord()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Marketing/SocialPostDeleteDialog.stx

@@ -6,17 +6,16 @@ const record = useReactiveProp('record', null as SocialPostRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `The persisted ${record()?.platform || 'social'} post will be permanently removed. This does not remove a post already published on the external platform.`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete social post dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="social-post-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="social-post-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete social post?</h2>
-    <p class="mt-2 text-gray-600 text-sm dark:text-neutral-300">The persisted {{ record()?.platform }} post will be permanently removed. This does not remove a post already published on the external platform.</p>
-    <p :if="error()" role="alert" class="mt-3 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 rounded-lg">{{ error() }}</p>
-    <footer class="flex gap-2 justify-end mt-6">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete social post</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete social post?"
+  :description="description()"
+  confirmLabel="Delete social post"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/UI/ConfirmDialog.stx

@@ -8,6 +8,8 @@ const confirmLabel = useReactiveProp('confirmLabel', 'Delete')
 const cancelLabel = useReactiveProp('cancelLabel', 'Cancel')
 const variant = useReactiveProp('variant', 'danger' as ConfirmVariant)
 const busy = useReactiveProp('busy', false)
+const disabled = useReactiveProp('disabled', false)
+const error = useReactiveProp('error', '')
 const emit = defineEmits()
 
 function close(): void {
@@ -16,7 +18,7 @@ function close(): void {
 }
 
 function confirm(): void {
-  if (!busy())
+  if (!busy() && !disabled())
     emit('confirm')
 }
 
@@ -32,57 +34,53 @@ function iconName(): string {
 
 </script>
 
-<template :if="open()">
-  <div class="fixed inset-0 overflow-y-auto z-[55] dashboard-modal-layer" @keydown.escape="close">
-    <button type="button" class="fixed inset-0 w-full bg-black/50 backdrop-blur-sm cursor-default" aria-label="Close confirmation dialog" @click="close"></button>
-
-    <div class="flex relative items-center justify-center p-4 min-h-full">
-      <section
-        role="alertdialog"
-        aria-modal="true"
-        :aria-label="title()"
-        class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl"
-      >
-        <div class="flex gap-4 items-start">
-          <div class="shrink-0 p-2.5 rounded-lg" :class="iconClass()">
-            <span class="block h-5 w-5" :class="iconName()"></span>
-          </div>
-          <div class="flex-1 min-w-0">
-            <h3 class="font-semibold text-lg text-neutral-900 dark:text-white">
-              {{ title() }}
-            </h3>
-            <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
-              {{ description() }}
-            </p>
-          </div>
-        </div>
+<Modal
+  :isOpen="open()"
+  :title="title()"
+  :description="description()"
+  :closable="!busy()"
+  role="alertdialog"
+  size="sm"
+  @close="close"
+>
+  <template #header-leading>
+    <div class="shrink-0 p-2.5 rounded-lg" :class="iconClass()">
+      <span class="block h-5 w-5" :class="iconName()"></span>
+    </div>
+  </template>
 
-        <div class="flex gap-2 items-center justify-end mt-6">
-          <Button
-            variant="secondary"
-            :disabled="busy()"
-            @click="close"
-          >
-            {{ cancelLabel() }}
-          </Button>
-          <Button
-            :if="variant() === 'warning'"
-            variant="warning"
-            :loading="busy()"
-            @click="confirm"
-          >
-            {{ confirmLabel() }}
-          </Button>
-          <Button
-            :if="variant() !== 'warning'"
-            variant="danger"
-            :loading="busy()"
-            @click="confirm"
-          >
-            {{ confirmLabel() }}
-          </Button>
-        </div>
-      </section>
+  <template #footer>
+    <div class="w-full">
+      <div :if="error()" role="alert" class="mb-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+        {{ error() }}
+      </div>
+      <div class="flex gap-2 items-center justify-end">
+        <Button
+          variant="secondary"
+          :disabled="busy()"
+          @click="close"
+        >
+          {{ cancelLabel() }}
+        </Button>
+        <Button
+          :if="variant() === 'warning'"
+          variant="warning"
+          :loading="busy()"
+          :disabled="disabled()"
+          @click="confirm"
+        >
+          {{ confirmLabel() }}
+        </Button>
+        <Button
+          :if="variant() !== 'warning'"
+          variant="danger"
+          :loading="busy()"
+          :disabled="disabled()"
+          @click="confirm"
+        >
+          {{ confirmLabel() }}
+        </Button>
+      </div>
     </div>
-  </div>
-</template>
+  </template>
+</Modal>

package/resources/components/Dashboard/UI/Modal.stx

@@ -5,9 +5,10 @@ interface ModalProps {
   description?: string
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
   closable?: boolean
+  role?: 'dialog' | 'alertdialog'
 }
 
-const { isOpen = false, title = '', description = '', size = 'md', closable = true } = defineProps<ModalProps>()
+const { isOpen = false, title = '', description = '', size = 'md', closable = true, role = 'dialog' } = defineProps<ModalProps>()
 
 const sizeClasses = {
   sm: 'max-w-sm',
@@ -22,6 +23,7 @@ const open = useReactiveProp('isOpen', false)
 const liveClosable = useReactiveProp('closable', true)
 const liveTitle = useReactiveProp('title', '')
 const liveDescription = useReactiveProp('description', '')
+const liveRole = useReactiveProp('role', 'dialog')
 const dialog = useRef<HTMLDialogElement>('dashboardModalDialog')
 const activeElement = useActiveElement()
 const scrollLocked = useScrollLock()
@@ -72,7 +74,7 @@ effect(() => {
   <dialog
     :if="open()"
     ref="dashboardModalDialog"
-    role="dialog"
+    :role="liveRole()"
     aria-modal="true"
     :aria-label="liveTitle() || 'Dialog'"
     class="fixed inset-0 m-0 p-0 h-dvh max-h-none w-screen max-w-none overflow-y-auto z-[55] bg-transparent dashboard-modal-layer dashboard-modal-dialog"
@@ -84,8 +86,9 @@ effect(() => {
         class="relative w-full rounded-xl bg-white dark:bg-neutral-900 shadow-2xl {{ sizeClasses[size] }}"
       >
         <!-- Header -->
-        @if(title || closable)
-          <div class="flex gap-4 items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
+        <div :if="liveTitle() || liveClosable()" class="flex gap-4 items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
+          <div class="flex gap-3 items-start min-w-0">
+            <slot name="header-leading" />
             <div class="min-w-0">
                 <h3 :if="liveTitle()" class="font-semibold text-lg text-neutral-900 dark:text-white">
                   {{ liveTitle() }}
@@ -94,26 +97,27 @@ effect(() => {
                   {{ liveDescription() }}
                 </p>
             </div>
-
-            @if(closable)
-              <Button
-                variant="ghost"
-                size="sm"
-                iconOnly
-                ariaLabel="Close modal"
-                @click="closeModal"
-              >
-                <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
-              </Button>
-            @endif
           </div>
-        @endif
 
-        <!-- Body -->
-        <div class="p-6">
-          <slot />
+          <Button
+            :if="liveClosable()"
+            variant="ghost"
+            size="sm"
+            iconOnly
+            ariaLabel="Close modal"
+            @click="closeModal"
+          >
+            <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
+          </Button>
         </div>
 
+        <!-- Body -->
+        @if($slots.default)
+          <div class="p-6">
+            <slot />
+          </div>
+        @endif
+
         @if($slots.footer)
           <div class="flex items-center justify-end px-6 py-4 border-neutral-200 border-t dark:border-neutral-700">
             <slot name="footer" />