@stacksjs/defaults 0.70.365 → 0.70.367

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.70.365",
+  "version": "0.70.367",
   "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/Auth/ForgotPasswordDashboard.stx

@@ -17,8 +17,6 @@ async function handleForgotPassword(data) {
   }
   catch (err) {
     error.set(err instanceof Error ? err.message : 'Failed to send reset link')
-    // eslint-disable-next-line no-console
-    console.error(err)
   }
   finally {
     isLoading.set(false)

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

@@ -27,7 +27,7 @@ async function handleLogin(credentials) {
     navigate(safeRedirect())
   }
   catch (err) {
-    error.set(err.message || 'An error occurred during login')
+    error.set(err instanceof Error ? err.message : 'An error occurred during login')
   }
   finally {
     isLoading.set(false)

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

@@ -27,9 +27,7 @@ async function handleRegister(credentials) {
     navigate(safeRedirect())
   }
   catch (err) {
-    error.set(err.message || 'An error occurred during registration')
-    // eslint-disable-next-line no-console
-    console.error(err)
+    error.set(err instanceof Error ? err.message : 'An error occurred during registration')
   }
   finally {
     isLoading.set(false)

package/resources/components/Dashboard/Ci/CiDashboard.stx

@@ -263,13 +263,13 @@
             <span class="text-xs text-zinc-400" :text="repo.commitAuthor"></span>
           </div>
 
-          <div :if="repo.renovatePRs > 0 || repo.actionsPRs > 0" class="mt-2 pt-2 border-t border-zinc-200/60 dark:border-zinc-800">
+          <div :if="repo.buddyBotPRs > 0 || repo.actionsPRs > 0" class="mt-2 pt-2 border-t border-zinc-200/60 dark:border-zinc-800">
             <div class="mb-1 text-xs text-zinc-400">Pull Requests</div>
             <div class="flex flex-wrap gap-x-3 gap-y-0.5">
-              <a :if="repo.renovatePRs > 0" :href="repo.renovatePRsUrl" target="_blank" @click.stop class="no-underline text-xs text-zinc-500 dark:text-zinc-400 hover:underline">
-                renovatebot: <span :text="repo.renovatePRs"></span>
+              <a :if="repo.buddyBotPRs > 0" :href="repo.buddyBotPRsUrl" target="_blank" rel="noreferrer" @click.stop class="no-underline text-xs text-zinc-500 dark:text-zinc-400 hover:underline">
+                buddy-bot: <span :text="repo.buddyBotPRs"></span>
               </a>
-              <a :if="repo.actionsPRs > 0" :href="repo.actionsPRsUrl" target="_blank" @click.stop class="no-underline text-xs text-zinc-500 dark:text-zinc-400 hover:underline">
+              <a :if="repo.actionsPRs > 0" :href="repo.actionsPRsUrl" target="_blank" rel="noreferrer" @click.stop class="no-underline text-xs text-zinc-500 dark:text-zinc-400 hover:underline">
                 github-actions: <span :text="repo.actionsPRs"></span>
               </a>
             </div>

package/resources/components/Dashboard/Deployments/DeploymentList.stx

@@ -1,7 +1,8 @@
 <script client>
-import type { DeploymentRecord } from '../../../../functions/deployments'
+import type { DeploymentRecord, DeploymentRollbackPlan } from '../../../../functions/deployments'
+import type { DeploymentPreview } from '@stacksjs/types'
 import { dashboardApi } from '../../../../functions/dashboard-api'
-import { fetchDeployments, summarizeDeployments } from '../../../../functions/deployments'
+import { fetchDeployments, previewDeploymentRollback, runDeploymentRollback, summarizeDeployments } from '../../../../functions/deployments'
 import { pushToast } from '../../../../functions/toasts'
 
 interface DeploymentStartResponse {
@@ -16,9 +17,18 @@ const status = state('all')
 const isLoading = state(true)
 const loadError = state('')
 const showDeployModal = state(false)
+const deploymentDialogMode = state<'preview' | 'deploy'>('deploy')
 const isStarting = state(false)
+const isPreviewing = state(false)
+const previewPlan = state<DeploymentPreview | null>(null)
 const environment = state('production')
 const domain = state('')
+const showRollbackModal = state(false)
+const rollbackPlan = state<DeploymentRollbackPlan | null>(null)
+const rollbackSite = state('')
+const rollbackRelease = state('')
+const rollbackConfirmation = state('')
+const isRollingBack = state(false)
 const summary = derived(() => summarizeDeployments(deployments()))
 const environmentOptions = [
   { value: 'production', label: 'Production' },
@@ -72,14 +82,13 @@ async function loadDeployments(): Promise<void> {
   }
 }
 
-async function startDeployment(dryRun: boolean): Promise<void> {
+async function startDeployment(): Promise<void> {
   isStarting.set(true)
   try {
     const result = await dashboardApi<DeploymentStartResponse>('/api/dashboard/deployments', {
       method: 'POST',
       body: {
-        confirmed: !dryRun,
-        dryRun,
+        confirmed: true,
         environment: environment(),
         domain: domain().trim(),
       },
@@ -90,11 +99,10 @@ async function startDeployment(dryRun: boolean): Promise<void> {
     pushToast('success', result.message, {
       detail: result.pid ? `Process ${result.pid}` : undefined,
     })
-    if (!dryRun)
-      await loadDeployments()
+    await loadDeployments()
   }
   catch (error) {
-    pushToast('error', dryRun ? 'Could not preview deployment' : 'Could not start deployment', {
+    pushToast('error', 'Could not start deployment', {
       detail: error instanceof Error ? error.message : String(error),
     })
   }
@@ -103,6 +111,89 @@ async function startDeployment(dryRun: boolean): Promise<void> {
   }
 }
 
+function openDeploymentDialog(mode: 'preview' | 'deploy'): void {
+  deploymentDialogMode.set(mode)
+  showDeployModal.set(true)
+}
+
+async function previewDeployment(): Promise<void> {
+  isPreviewing.set(true)
+  try {
+    const result = await dashboardApi<{ success: boolean, plan: DeploymentPreview }>('/api/dashboard/deployments/preview', {
+      method: 'POST',
+      body: {
+        environment: environment(),
+        domain: domain().trim(),
+      },
+    })
+    if (!result.success || !result.plan)
+      throw new Error('Deployment preview could not be generated.')
+    showDeployModal.set(false)
+    previewPlan.set(result.plan)
+  }
+  catch (error) {
+    pushToast('error', 'Could not preview deployment', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    isPreviewing.set(false)
+  }
+}
+
+function continueFromPreview(): void {
+  previewPlan.set(null)
+  openDeploymentDialog('deploy')
+}
+
+function openRollback(): void {
+  rollbackPlan.set(null)
+  rollbackConfirmation.set('')
+  showRollbackModal.set(true)
+}
+
+async function previewRollback(): Promise<void> {
+  isRollingBack.set(true)
+  try {
+    const result = await previewDeploymentRollback({
+      environment: environment(),
+      site: rollbackSite().trim() || undefined,
+      release: rollbackRelease().trim() || undefined,
+    })
+    rollbackPlan.set(result.plan)
+  }
+  catch (error) {
+    pushToast('error', 'Could not preview rollback', { detail: error instanceof Error ? error.message : String(error) })
+  }
+  finally {
+    isRollingBack.set(false)
+  }
+}
+
+async function confirmRollback(): Promise<void> {
+  const plan = rollbackPlan()
+  if (!plan) return
+  isRollingBack.set(true)
+  try {
+    const result = await runDeploymentRollback({
+      environment: environment(),
+      site: rollbackSite().trim() || undefined,
+      release: rollbackRelease().trim() || undefined,
+      revision: plan.revision,
+      confirmation: rollbackConfirmation(),
+    })
+    showRollbackModal.set(false)
+    pushToast('success', result.message)
+    await loadDeployments()
+  }
+  catch (error) {
+    pushToast('error', 'Rollback failed', { detail: error instanceof Error ? error.message : String(error) })
+  }
+  finally {
+    isRollingBack.set(false)
+  }
+}
+
 onMount(() => {
   void loadDeployments()
 })
@@ -115,10 +206,13 @@ onMount(() => {
       <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Deployment model records through the guarded dashboard API.</p>
     </div>
     <div class="flex gap-2 items-center">
-      <Button :disabled="isStarting()" variant="outline" @click="startDeployment(true)">
+      <Button :disabled="isStarting() || isPreviewing()" variant="outline" @click="openDeploymentDialog('preview')">
         Preview
       </Button>
-      <Button :disabled="isStarting()" @click="showDeployModal.set(true)">
+      <Button :disabled="isStarting() || isPreviewing() || isRollingBack()" variant="secondary" @click="openRollback">
+        Rollback
+      </Button>
+      <Button :disabled="isStarting() || isPreviewing()" @click="openDeploymentDialog('deploy')">
         Deploy
       </Button>
       <Button :loading="isLoading()" variant="secondary" @click="loadDeployments">
@@ -179,8 +273,8 @@ onMount(() => {
 
   <Modal
     :isOpen="showDeployModal()"
-    title="Start deployment"
-    description="This runs ./buddy deploy as a real background process and records its status."
+    :title="deploymentDialogMode() === 'preview' ? 'Preview deployment' : 'Start deployment'"
+    :description="deploymentDialogMode() === 'preview' ? 'Generate a non-mutating plan from the native Buddy deployment pipeline.' : 'This runs ./buddy deploy as a real background process and records its status.'"
     size="sm"
     @close="showDeployModal.set(false)"
   >
@@ -204,9 +298,48 @@ onMount(() => {
     </div>
     <template #footer>
       <div class="flex gap-2 items-center">
-        <Button :disabled="isStarting()" variant="ghost" @click="showDeployModal.set(false)">Cancel</Button>
-        <Button :loading="isStarting()" @click="startDeployment(false)">Start deployment</Button>
+        <Button :disabled="isStarting() || isPreviewing()" variant="ghost" @click="showDeployModal.set(false)">Cancel</Button>
+        <template :if="deploymentDialogMode() === 'preview'">
+          <Button :loading="isPreviewing()" @click="previewDeployment">Generate preview</Button>
+        </template>
+        <template :else>
+          <Button :loading="isStarting()" @click="startDeployment">Start deployment</Button>
+        </template>
+      </div>
+    </template>
+  </Modal>
+
+  <DeploymentPreviewDialog :plan="previewPlan" @close="previewPlan.set(null)" @deploy="continueFromPreview" />
+
+  <Modal :isOpen="showRollbackModal()" title="Rollback deployment" description="Preview and validate a preserved release before changing the active runtime." size="lg" @close="showRollbackModal.set(false)">
+    <div class="space-y-4">
+      <div class="grid gap-4 sm:grid-cols-2">
+        <Select v-model:value="environment" :options="environmentOptions" label="Environment" placeholder="" />
+        <Input v-model:value="rollbackSite" label="Site" placeholder="All application sites" hint="Optional site slug." />
       </div>
+      <Input v-model:value="rollbackRelease" label="Preserved release" placeholder="Previous release" hint="Optional. Leave blank to use the previous preserved release." />
+      <template :if="rollbackPlan()">
+        <div class="p-4 bg-neutral-50 dark:bg-neutral-950 border border-neutral-200 rounded-lg dark:border-neutral-800">
+          <div class="flex gap-3 items-start">
+            <span aria-hidden="true" class="shrink-0 mt-0.5 h-5 w-5 text-blue-600 i-hugeicons-git-pull-request"></span>
+            <div>
+              <p class="font-semibold text-gray-900 text-sm dark:text-white">Validated rollback to {{ rollbackPlan()?.target }}</p>
+              <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ rollbackPlan()?.site || 'All sites' }} in {{ rollbackPlan()?.environment }}</p>
+            </div>
+          </div>
+          <pre class="mt-4 p-3 max-h-40 overflow-auto whitespace-pre-wrap font-mono text-neutral-600 text-xs dark:text-neutral-300 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">{{ rollbackPlan()?.output }}</pre>
+        </div>
+        <div :for="warning in rollbackPlan()?.warnings || []" class="flex gap-2 items-start text-orange-800 text-sm dark:text-orange-200">
+          <span aria-hidden="true" class="shrink-0 mt-0.5 h-4 w-4 i-hugeicons-alert-02"></span>
+          <span>{{ warning }}</span>
+        </div>
+        <Input v-model:value="rollbackConfirmation" label="Confirmation" :placeholder="'rollback ' + environment()" :hint="'Type rollback ' + environment() + ' to continue.'" autocomplete="off" />
+      </template>
+    </div>
+    <template #footer>
+      <Button variant="secondary" :disabled="isRollingBack()" @click="showRollbackModal.set(false)">Cancel</Button>
+      <Button :if="!rollbackPlan()" :loading="isRollingBack()" @click="previewRollback">Preview rollback</Button>
+      <Button :if="rollbackPlan()" variant="danger" :loading="isRollingBack()" @click="confirmRollback">Rollback deployment</Button>
     </template>
   </Modal>
 </div>

package/resources/components/Dashboard/Deployments/DeploymentPreviewDialog.stx

@@ -0,0 +1,118 @@
+<script client>
+import type { DeploymentPreview, DeploymentPreviewOperation } from '@stacksjs/types'
+
+const plan = useReactiveProp<DeploymentPreview | null>('plan', null)
+const emit = defineEmits()
+
+const phaseIcons: Record<DeploymentPreviewOperation['phase'], string> = {
+  validate: 'i-hugeicons-task-01',
+  infrastructure: 'i-hugeicons-cloud-server',
+  build: 'i-hugeicons-tools',
+  package: 'i-hugeicons-package',
+  release: 'i-hugeicons-upload-04',
+  runtime: 'i-hugeicons-computer-terminal-01',
+  gateway: 'i-hugeicons-route-01',
+  dns: 'i-hugeicons-globe-02',
+  tls: 'i-hugeicons-shield-key',
+  container: 'i-hugeicons-cube',
+}
+
+function icon(operation: DeploymentPreviewOperation): string {
+  return phaseIcons[operation.phase] || 'i-hugeicons-check-list'
+}
+</script>
+
+<Modal
+  :isOpen="Boolean(plan())"
+  title="Deployment preview"
+  description="Generated from the same environment-aware deployment model as Buddy. No changes were made."
+  size="xl"
+  contentClassName="p-0"
+  @close="emit('close')"
+>
+  <div :if="plan()" class="max-h-[65vh] overflow-y-auto">
+    <div class="grid gap-px grid-cols-2 md:grid-cols-4 bg-neutral-200 dark:bg-neutral-700 border-neutral-200 border-b dark:border-neutral-700">
+      <div class="p-4 bg-white dark:bg-neutral-900">
+        <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Environment</p>
+        <p class="mt-1 capitalize font-semibold text-neutral-900 text-sm dark:text-white">{{ plan()?.environment }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900">
+        <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Provider</p>
+        <p class="mt-1 capitalize font-semibold text-neutral-900 text-sm dark:text-white">{{ plan()?.provider }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900">
+        <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Region</p>
+        <p class="mt-1 font-semibold text-neutral-900 text-sm dark:text-white">{{ plan()?.region }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900">
+        <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Target</p>
+        <p class="mt-1 font-semibold text-neutral-900 text-sm dark:text-white">{{ plan()?.target.site || 'All sites' }}</p>
+      </div>
+    </div>
+
+    <div class="p-6">
+      <div class="flex gap-3 items-start p-4 text-green-800 dark:text-green-200 bg-green-50 dark:bg-green-950/30 border border-green-200 rounded-xl dark:border-green-900">
+        <span aria-hidden="true" class="shrink-0 mt-0.5 h-5 w-5 i-hugeicons-checkmark-circle-02"></span>
+        <div>
+          <p class="font-semibold text-sm">Preview only</p>
+          <p class="mt-1 text-sm">No builds, packages, hooks, cloud providers, records, DNS changes, or service restarts were performed.</p>
+        </div>
+      </div>
+
+      <div :if="(plan()?.warnings || []).length > 0" class="mt-4 space-y-2">
+        <div :for="warning in plan()?.warnings || []" class="flex gap-3 items-start p-4 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-xl dark:border-amber-900">
+          <span aria-hidden="true" class="shrink-0 mt-0.5 h-5 w-5 i-hugeicons-alert-02"></span>
+          <p class="text-sm">{{ warning }}</p>
+        </div>
+      </div>
+
+      <section class="mt-6">
+        <div class="flex gap-3 items-end justify-between">
+          <div>
+            <h4 class="font-semibold text-neutral-900 dark:text-white">Planned operations</h4>
+            <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Executed in this order during a real deployment.</p>
+          </div>
+          <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ plan()?.operations.length || 0 }} steps</span>
+        </div>
+        <ol class="mt-4 space-y-3">
+          <li :for="operation, index in plan()?.operations || []" class="flex gap-4 items-start p-4 bg-neutral-50 dark:bg-neutral-800/70 border border-neutral-200 rounded-xl dark:border-neutral-700">
+            <div class="flex shrink-0 items-center justify-center h-9 w-9 text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-950/60 rounded-lg">
+              <span aria-hidden="true" class="h-5 w-5 {{ icon(operation) }}"></span>
+            </div>
+            <div class="min-w-0 flex-1">
+              <div class="flex gap-2 items-center">
+                <span class="font-mono text-neutral-400 text-xs">{{ index + 1 }}</span>
+                <h5 class="font-semibold text-neutral-900 text-sm dark:text-white">{{ operation.label }}</h5>
+              </div>
+              <p class="mt-1 text-neutral-600 text-sm dark:text-neutral-300">{{ operation.detail }}</p>
+              <p :if="operation.sites.length > 0" class="mt-2 font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ operation.sites.join(', ') }}</p>
+            </div>
+          </li>
+        </ol>
+      </section>
+
+      <section class="mt-6">
+        <h4 class="font-semibold text-neutral-900 dark:text-white">Resolved sites</h4>
+        <div class="grid gap-3 md:grid-cols-2 mt-4">
+          <article :for="site in plan()?.sites || []" class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+            <div class="flex gap-3 items-center justify-between">
+              <h5 class="font-semibold text-neutral-900 text-sm dark:text-white">{{ site.name }}</h5>
+              <span class="px-2 py-1 font-mono text-neutral-600 text-[11px] dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800 rounded-md">{{ site.kind }}</span>
+            </div>
+            <p class="mt-2 text-neutral-500 text-xs dark:text-neutral-400">{{ site.domains.join(', ') || 'Private service' }}{{ site.path !== '/' ? site.path : '' }}</p>
+          </article>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <template #footer>
+    <div class="flex gap-2 items-center justify-between w-full">
+      <p class="hidden sm:block text-neutral-500 text-xs dark:text-neutral-400">Review this plan before continuing.</p>
+      <div class="flex gap-2 items-center sm:ml-auto">
+        <Button variant="secondary" @click="emit('close')">Close</Button>
+        <Button @click="emit('deploy')">Continue to deploy</Button>
+      </div>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/GlobalSearch.stx

@@ -112,10 +112,6 @@ function handleDialogKeydown(event: KeyboardEvent): void {
     event.preventDefault()
     selectCurrent()
   }
-  else if (event.key === 'Escape') {
-    event.preventDefault()
-    close()
-  }
 }
 
 function handleGlobalKeydown(event: KeyboardEvent): void {
@@ -123,10 +119,6 @@ function handleGlobalKeydown(event: KeyboardEvent): void {
     event.preventDefault()
     isOpen() ? close() : open()
   }
-  else if (isOpen() && event.key === 'Escape') {
-    event.preventDefault()
-    close()
-  }
 }
 
 useEventListener('keydown', handleGlobalKeydown)
@@ -136,94 +128,98 @@ onDestroy(() => {
 })
 </script>
 
-<template :if="isOpen()">
-  <div class="fixed inset-0 overflow-y-auto z-50 dashboard-modal-layer" role="dialog" aria-modal="true" aria-label="Search dashboard" @keydown="handleDialogKeydown">
-    <button type="button" class="fixed inset-0 w-full bg-black/50 backdrop-blur-sm cursor-default" aria-label="Close search" @click="close"></button>
-
-    <div class="relative mt-[15vh] mx-auto max-w-lg">
-      <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-2xl">
-        <div class="flex items-center px-4 border-b border-neutral-200 dark:border-neutral-700">
-          <span class="shrink-0 h-5 w-5 text-neutral-400 i-hugeicons-search-02"></span>
-          <input
-            ref="globalSearchInput"
-            x-model="query"
-            type="search"
-            placeholder="Search model records"
-            aria-label="Search model records"
-            class="px-3 py-4 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-transparent border-none focus:outline-none focus:ring-0"
-            @input="scheduleSearch($event.target.value)"
-          />
-          <span :if="isSearching()" class="shrink-0 h-5 w-5 text-blue-500 animate-spin i-hugeicons-loading-03"></span>
-          <kbd :if="!isSearching()" class="shrink-0 px-1.5 py-0.5 font-medium text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
-            ESC
-          </kbd>
-        </div>
-
-        <div class="overflow-y-auto max-h-80">
-          <div :if="error()" role="alert" class="px-4 py-8 text-center">
-            <span class="mb-2 mx-auto h-8 w-8 text-red-400 i-hugeicons-alert-02"></span>
-            <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
-          </div>
+<Modal
+  :isOpen="isOpen()"
+  ariaLabel="Search dashboard"
+  size="md"
+  position="top"
+  panelClassName="overflow-hidden border border-neutral-200 dark:border-neutral-700"
+  contentClassName="p-0"
+  :showCloseButton="false"
+  @close="close()"
+>
+  <div @keydown="handleDialogKeydown">
+    <div class="flex items-center px-4 border-b border-neutral-200 dark:border-neutral-700">
+      <span class="shrink-0 h-5 w-5 text-neutral-400 i-hugeicons-search-02"></span>
+      <input
+        ref="globalSearchInput"
+        x-model="query"
+        type="search"
+        autofocus
+        placeholder="Search model records"
+        aria-label="Search model records"
+        class="px-3 py-4 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-transparent border-none focus:outline-none focus:ring-0"
+        @input="scheduleSearch($event.target.value)"
+      />
+      <span :if="isSearching()" class="shrink-0 h-5 w-5 text-blue-500 animate-spin i-hugeicons-loading-03"></span>
+      <kbd :if="!isSearching()" class="shrink-0 px-1.5 py-0.5 font-medium text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
+        ESC
+      </kbd>
+    </div>
 
-          <div :if="!error() && unavailable().length > 0" role="status" class="mt-3 mx-3 px-3 py-2 text-amber-700 text-xs dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">
-            {{ unavailable().length }} searchable {{ unavailable().length === 1 ? 'model is' : 'models are' }} unavailable. Run migrations or fix the reported model configuration.
-          </div>
+    <div class="overflow-y-auto max-h-80">
+      <div :if="error()" role="alert" class="px-4 py-8 text-center">
+        <span class="mb-2 mx-auto h-8 w-8 text-red-400 i-hugeicons-alert-02"></span>
+        <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
+      </div>
 
-          <template :if="!error() && Object.keys(results()).length > 0">
-            <template :for="group in resultGroups()">
-              <div class="pb-1 pt-3 px-3">
-                <h3 class="px-1 font-semibold text-neutral-400 text-xs tracking-wider uppercase">
-                  {{ group.type }}
-                </h3>
-              </div>
-              <template :for="item in group.items">
-                <button
-                  type="button"
-                  class="flex gap-3 items-center px-4 py-2.5 w-full text-left transition-colors"
-                  :class="resultIndex(item) === selectedIndex() ? 'bg-blue-50 dark:bg-blue-950/40' : 'hover:bg-neutral-50 dark:hover:bg-neutral-800'"
-                  @mouseenter="selectedIndex.set(resultIndex(item))"
-                  @click="openResult(item)"
-                >
-                  <span :class="'shrink-0 h-5 w-5 text-neutral-400 ' + item.icon"></span>
-                  <span class="flex-1 min-w-0">
-                    <span class="block font-medium text-neutral-900 text-sm truncate dark:text-white">
-                      {{ item.title }}
-                    </span>
-                    <span :if="item.subtitle" class="block text-neutral-500 text-xs truncate dark:text-neutral-400">
-                      {{ item.subtitle }}
-                    </span>
-                  </span>
-                  <span class="shrink-0 h-4 w-4 text-neutral-300 dark:text-neutral-600 i-hugeicons-arrow-right-01"></span>
-                </button>
-              </template>
-            </template>
-          </template>
+      <div :if="!error() && unavailable().length > 0" role="status" class="mt-3 mx-3 px-3 py-2 text-amber-700 text-xs dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">
+        {{ unavailable().length }} searchable {{ unavailable().length === 1 ? 'model is' : 'models are' }} unavailable. Run migrations or fix the reported model configuration.
+      </div>
 
-          <div :if="!error() && query().trim() && !isSearching() && Object.keys(results()).length === 0" class="px-4 py-8 text-center">
-            <span class="mb-2 mx-auto h-8 w-8 text-neutral-300 dark:text-neutral-600 i-hugeicons-search-02"></span>
-            <p class="text-neutral-500 text-sm dark:text-neutral-400">No results found for "{{ query() }}"</p>
+      <template :if="!error() && Object.keys(results()).length > 0">
+        <template :for="group in resultGroups()">
+          <div class="pb-1 pt-3 px-3">
+            <h3 class="px-1 font-semibold text-neutral-400 text-xs tracking-wider uppercase">
+              {{ group.type }}
+            </h3>
           </div>
+          <template :for="item in group.items">
+            <button
+              type="button"
+              class="flex gap-3 items-center px-4 py-2.5 w-full text-left transition-colors"
+              :class="resultIndex(item) === selectedIndex() ? 'bg-blue-50 dark:bg-blue-950/40' : 'hover:bg-neutral-50 dark:hover:bg-neutral-800'"
+              @mouseenter="selectedIndex.set(resultIndex(item))"
+              @click="openResult(item)"
+            >
+              <span :class="'shrink-0 h-5 w-5 text-neutral-400 ' + item.icon"></span>
+              <span class="flex-1 min-w-0">
+                <span class="block font-medium text-neutral-900 text-sm truncate dark:text-white">
+                  {{ item.title }}
+                </span>
+                <span :if="item.subtitle" class="block text-neutral-500 text-xs truncate dark:text-neutral-400">
+                  {{ item.subtitle }}
+                </span>
+              </span>
+              <span class="shrink-0 h-4 w-4 text-neutral-300 dark:text-neutral-600 i-hugeicons-arrow-right-01"></span>
+            </button>
+          </template>
+        </template>
+      </template>
 
-          <div :if="!error() && !query().trim() && !isSearching()" class="px-4 py-8 text-center">
-            <p class="text-neutral-400 text-sm">Search fields declared by each model's useSearch trait.</p>
-          </div>
-        </div>
-
-        <div class="flex gap-4 items-center px-4 py-2.5 text-neutral-400 text-xs border-neutral-200 border-t dark:border-neutral-700">
-          <span class="flex gap-1 items-center">
-            <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">↑↓</kbd>
-            Navigate
-          </span>
-          <span class="flex gap-1 items-center">
-            <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">↵</kbd>
-            Open
-          </span>
-          <span class="flex gap-1 items-center">
-            <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">esc</kbd>
-            Close
-          </span>
-        </div>
+      <div :if="!error() && query().trim() && !isSearching() && Object.keys(results()).length === 0" class="px-4 py-8 text-center">
+        <span class="mb-2 mx-auto h-8 w-8 text-neutral-300 dark:text-neutral-600 i-hugeicons-search-02"></span>
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">No results found for "{{ query() }}"</p>
       </div>
+
+      <div :if="!error() && !query().trim() && !isSearching()" class="px-4 py-8 text-center">
+        <p class="text-neutral-400 text-sm">Search fields declared by each model's useSearch trait.</p>
+      </div>
+    </div>
+
+    <div class="flex gap-4 items-center px-4 py-2.5 text-neutral-400 text-xs border-neutral-200 border-t dark:border-neutral-700">
+      <span class="flex gap-1 items-center">
+        <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">↑↓</kbd>
+        Navigate
+      </span>
+      <span class="flex gap-1 items-center">
+        <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">↵</kbd>
+        Open
+      </span>
+      <span class="flex gap-1 items-center">
+        <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">esc</kbd>
+        Close
+      </span>
     </div>
   </div>
-</template>
+</Modal>