@stacksjs/defaults 0.72.98 → 0.72.99

package/app/Middleware.ts

@@ -1,13 +1,28 @@
-export interface Middleware {
-  [key: string]: string
-}
+import { defineMiddleware } from '@stacksjs/router'
 
 /**
  * The application's middleware aliases.
  *
- * Aliases may be used instead of class names to conveniently assign middleware to routes and groups.
+ * Aliases may be used instead of class names to conveniently assign middleware
+ * to routes and groups. Each one names a class under `app/Middleware/`, or one
+ * of the framework defaults behind it, and the name is checked.
+ *
+ * This map is MERGED over the framework defaults rather than replacing them,
+ * so an alias the framework adds later is available here without an edit.
+ *
+ * Two forms are read off a reference before it is looked up:
+ *
+ *   - `!alias` inverts it: the route passes only when that middleware refuses.
+ *     `'!auth'` is a guests-only route; `'!env:production'` is everywhere but
+ *     production.
+ *   - `alias:params` passes `params` to the middleware, but only when the
+ *     whole string is not itself an alias - so `'env:production'` is the alias
+ *     below and `'throttle:60,1'` passes `60,1` to `throttle`.
+ *
+ * A middleware with no alias is still reachable by its class name, which is how
+ * `'signed'` worked before it was listed here.
  */
-export default {
+export default defineMiddleware({
   'maintenance': 'Maintenance',
   'cors': 'Cors',
   'auth': 'Auth',
@@ -19,6 +34,7 @@ export default {
   'abilities': 'Abilities',
   'can': 'Can',
   'throttle': 'Throttle',
+  'signed': 'Signed',
   'env': 'Env',
   'env:local': 'EnvLocal',
   'env:development': 'EnvDevelopment',
@@ -32,5 +48,4 @@ export default {
   'csrf': 'Csrf',
   'compress': 'Compress',
   // Add more middleware aliases here
-  // Note: Use ! prefix for negation (e.g., '!auth', '!env:development')
-} satisfies Middleware
+})

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.72.98",
+  "version": "0.72.99",
   "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.72.98",
+  "version": "0.72.99",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -51,7 +51,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.72.98",
+    "@stacksjs/mobile": "^0.72.99",
     "@stacksjs/sanitizer": "^0.2.113"
   },
   "scripts": {

package/project/storage/framework/server/tsconfig.docker.json

@@ -11,8 +11,7 @@
       "Actions/*": ["../app/Actions/*"],
       "Jobs/*": ["../app/Jobs/*"],
       "./app/*": ["../app/*"], // it's outside the dist folder
-      "~/*": ["../*"],
-      "../../../env": ["../storage/framework/env.ts"]
+      "~/*": ["../*"]
     },
     "resolveJsonModule": true,
     "allowImportingTsExtensions": true,

package/resources/components/Buttons/Counter.stx

@@ -1,28 +1,37 @@
-<script>
+<script client>
+/*
+ * A counter, in signals.
+ *
+ * This used to be a `<script client>` that ran `document.querySelector` on
+ * mount, read the count back out of `textContent`, `parseInt`ed it and wrote a
+ * number back into that string property. It worked, but as the component every
+ * new app has in `Buttons/`, it taught the one pattern the stx guidance rules
+ * out: reaching for the DOM instead of state. It also only ever bound the
+ * first `[data-counter]` on the page, so a second `<Counter />` was inert.
+ */
 interface CounterProps {
   count?: number
 }
 
 const { count = 0 } = defineProps<CounterProps>()
+
+const total = state(count)
+
+function increase(): void {
+  total.set(total() + 1)
+}
 </script>
+
 <div>
-    <button
-      type="button"
-      class="text-white text-xs bg-blue-500 hover:bg-blue-600 btn"
-      data-counter
-    >
-      <i
-        class="-ml-1 mr-3 h-4 w-4 i-hugeicons-outline-plus"
-        aria-hidden="true"
-      ></i>
-      Counter: <span data-count>{{ count }}</span>
-    </button>
-  </div>
-<script client>
-document.querySelector('[data-counter]')?.addEventListener('click', function() {
-  const countEl = document.querySelector('[data-count]')
-  if (countEl) {
-    countEl.textContent = parseInt(countEl.textContent || '0') + 1
-  }
-})
-</script>
+  <button
+    type="button"
+    class="text-white text-xs bg-blue-500 hover:bg-blue-600 btn"
+    @click="increase"
+  >
+    <i
+      class="-ml-1 mr-3 h-4 w-4 i-hugeicons-outline-plus"
+      aria-hidden="true"
+    ></i>
+    Counter: <span>{{ total() }}</span>
+  </button>
+</div>

package/resources/components/Dashboard/Analytics/WebAnalyticsDashboard.stx

@@ -211,11 +211,9 @@ import type {
 } from '~/storage/framework/defaults/functions/analytics'
 import { fetchWebAnalytics } from '~/storage/framework/defaults/functions/analytics'
 import { pushToast } from '~/storage/framework/defaults/functions/toasts'
+import type { ChartCtor, ChartLike } from '~/storage/framework/defaults/views/dashboard/composables/useChart'
 import { useChart } from '~/storage/framework/defaults/views/dashboard/composables/useChart'
 
-interface ChartLike { destroy: () => void }
-type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
-
 const analyticsOverview = state<AnalyticsOverview>({
   realtimeVisitors: 0,
   uniqueVisitors: 0,

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

@@ -11,7 +11,7 @@ const isLoading = state(false)
 const error = state('')
 const success = state(false)
 
-async function handleForgotPassword(data) {
+async function handleForgotPassword(data: { email: string }): Promise<void> {
   isLoading.set(true)
   error.set('')
 

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

@@ -1,4 +1,5 @@
 <script client>
+import type { AuthUser } from '../../../../types/dashboard'
 import { describeAuthError, useAuth } from '../../../../functions/auth'
 
 const { login } = useAuth()
@@ -12,7 +13,7 @@ function safeRedirect(): string {
   return redirect.startsWith('/') && !redirect.startsWith('//') ? redirect : '/'
 }
 
-async function handleLogin(credentials) {
+async function handleLogin(credentials: AuthUser): Promise<void> {
   isLoading.set(true)
   error.set('')
 

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

@@ -1,4 +1,5 @@
 <script client>
+import type { RegisterCredentials } from '../../../../types/dashboard'
 import { describeAuthError, useAuth } from '../../../../functions/auth'
 
 const { register } = useAuth()
@@ -12,7 +13,7 @@ function safeRedirect(): string {
   return redirect.startsWith('/') && !redirect.startsWith('//') ? redirect : '/'
 }
 
-async function handleRegister(credentials) {
+async function handleRegister(credentials: RegisterCredentials): Promise<void> {
   isLoading.set(true)
   error.set('')
 

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

@@ -53,7 +53,7 @@ async function verify(): Promise<void> {
   }
 }
 
-async function handleReset(data): Promise<void> {
+async function handleReset(data: { password: string, password_confirmation: string }): Promise<void> {
   isLoading.set(true)
   error.set('')
 

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

@@ -41,33 +41,33 @@
     return 'Runners: ' + r.running + ' running, ' + r.queued + ' queued / ' + r.cap + ' cap'
   })
 
-  function tabClass(id) {
+  function tabClass(id: string) {
     const base = 'px-4 py-2 font-medium text-sm whitespace-nowrap bg-transparent border-b-2 transition-colors cursor-pointer '
     return activeTab() === id
       ? base + 'border-violet-400 text-violet-600 dark:text-violet-400'
       : base + 'border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
   }
 
-  function filterClass(id) {
+  function filterClass(id: string) {
     const base = 'px-3 py-1 text-xs rounded-full border transition-colors cursor-pointer '
     return statusFilter() === id
       ? base + 'bg-violet-500 border-violet-500 text-white'
       : base + 'bg-transparent border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400'
   }
 
-  function borderColor(status) {
+  function borderColor(status: string) {
     if (status === 'success') return 'border-color: rgba(16,185,129,0.3)'
     if (status === 'failure' || status === 'error') return 'border-color: rgba(239,68,68,0.3)'
     if (status === 'pending') return 'border-color: rgba(234,179,8,0.3)'
     return 'border-color: rgba(39,39,42,1)'
   }
 
-  function isSuccess(status) { return status === 'success' }
-  function isFailing(status) { return status === 'failure' || status === 'error' }
-  function isPending(status) { return status === 'pending' }
-  function isNoRuns(status) { return status === 'no_runs' }
+  function isSuccess(status: string) { return status === 'success' }
+  function isFailing(status: string) { return status === 'failure' || status === 'error' }
+  function isPending(status: string) { return status === 'pending' }
+  function isNoRuns(status: string) { return status === 'no_runs' }
 
-  function timeAgo(dateStr) {
+  function timeAgo(dateStr: string | null | undefined) {
     if (!dateStr) return ''
     const diff = Date.now() - new Date(dateStr).getTime()
     const mins = Math.floor(diff / 60000)
@@ -78,7 +78,7 @@
     return days + 'd ago'
   }
 
-  function truncate(str, len) {
+  function truncate(str: string, len: number) {
     if (!str) return ''
     return str.length > len ? str.slice(0, len) + '...' : str
   }

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

@@ -11,7 +11,7 @@ const jobsByRunId = derived(() => ci.drilldownJobsByRunId())
 const loadingJobsRunId = derived(() => ci.loadingJobsForRunId())
 const title = derived(() => target()?.fullName || 'Run history')
 
-function runRowClass(conclusion, status) {
+function runRowClass(conclusion: string, status: string) {
   const base = 'px-3 py-2 -mx-3 border-l-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors '
   if (status !== 'completed') return base + 'border-yellow-400'
   if (conclusion === 'success') return base + 'border-emerald-400'
@@ -20,14 +20,14 @@ function runRowClass(conclusion, status) {
   return base + 'border-zinc-200 dark:border-zinc-800'
 }
 
-function runStatusBadge(conclusion, status) {
+function runStatusBadge(conclusion: string, status: string) {
   if (status !== 'completed') return { label: status, cls: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300' }
   if (conclusion === 'success') return { label: 'success', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' }
   if (conclusion === 'failure') return { label: 'failure', cls: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' }
   return { label: conclusion || 'unknown', cls: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' }
 }
 
-function formatDuration(ms) {
+function formatDuration(ms: number) {
   if (ms == null) return ''
   const seconds = Math.floor(ms / 1000)
   if (seconds < 60) return seconds + 's'
@@ -38,7 +38,7 @@ function formatDuration(ms) {
   return hours + 'h ' + (minutes % 60) + 'm'
 }
 
-function timeAgo(dateStr) {
+function timeAgo(dateStr: string | null | undefined) {
   if (!dateStr) return ''
   const diff = Date.now() - new Date(dateStr).getTime()
   const minutes = Math.floor(diff / 60000)
@@ -48,16 +48,16 @@ function timeAgo(dateStr) {
   return Math.floor(hours / 24) + 'd ago'
 }
 
-function truncate(value, length) {
+function truncate(value: string, length: number) {
   if (!value) return ''
   return value.length > length ? value.slice(0, length) + '...' : value
 }
 
-function jobsForRun(runId) {
+function jobsForRun(runId: number) {
   return jobsByRunId()[runId] || []
 }
 
-function failedJobs(runId) {
+function failedJobs(runId: number) {
   return jobsForRun(runId).filter(job => job.conclusion && job.conclusion !== 'success' && job.conclusion !== 'skipped' && job.conclusion !== 'neutral')
 }
 </script>

package/resources/components/Dashboard/Commerce/CommerceOverviewCharts.stx

@@ -1,5 +1,6 @@
 <script client>
 import type { CommerceDashboardChartSeries } from '../../../../app/Actions/Dashboard/Commerce/commerce-dashboard'
+import type { ChartOptions } from '../../../../views/dashboard/composables'
 import { useLazyCharts } from '../../../../views/dashboard/composables'
 
 const series = useReactiveProp('series', {
@@ -41,7 +42,7 @@ const ordersData = {
     data: [] as number[],
   }],
 }
-const chartOptions = {
+const chartOptions: ChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
   plugins: { legend: { display: true, position: 'top' } },

package/resources/components/Dashboard/Commerce/CommercePaymentsDashboard.stx

@@ -1,5 +1,5 @@
 <script client>
-import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
+import type { PaymentRecord, PaymentSummary } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
 import {
   paymentsToCsv,
   summarizePayments,

package/resources/components/Dashboard/Content/BlogDashboard.stx

@@ -2,6 +2,10 @@
 import { publicApplicationUrl } from '../../../../functions/public-application-url'
 
 export const blogUrl = publicApplicationUrl('/blog')
+
+// Declared so the client block below gets `blogUrl` typed rather than inferred
+// off the implicit bridge.
+defineClientPayload({ blogUrl })
 </script>
 
 <template>
@@ -198,6 +202,7 @@ export const blogUrl = publicApplicationUrl('/blog')
 <script client>
 // Plain async transport for /api/dashboard/blog, which reads and writes the
 // markdown files in content/blog. It owns no state; the signals below do.
+import type { BlogPost, BlogPostDraft } from '~/storage/framework/defaults/functions/blog'
 import { deleteBlogPost, fetchBlogPost, fetchBlogPosts, saveBlogPost } from '~/storage/framework/defaults/functions/blog'
 
 const publicBlogBaseUrl = {{ blogUrl }}
@@ -205,7 +210,7 @@ const publicBlogBaseUrl = {{ blogUrl }}
 // Fixed-length list purely to render the loading skeleton rows.
 const skeletonRows = [1, 2, 3, 4]
 
-const posts = state([])
+const posts = state<BlogPost[]>([])
 const isLoading = state(true)
 const isSaving = state(false)
 const loadError = state('')
@@ -213,18 +218,29 @@ const searchQuery = state('')
 const statusFilter = state('all')
 
 const isEditorOpen = state(false)
-const editingPost = state(null)
+const editingPost = state<BlogPost | null>(null)
 const loadedBody = state('')
 const bodyLoading = state(false)
 const bodyLoadFailed = state(false)
 const formError = state('')
 
-const postToDelete = state(null)
+const postToDelete = state<BlogPost | null>(null)
 const isDeleting = state(false)
 const deleteError = state('')
 let editorRequestId = 0
 
-function publicPostUrl(slug) {
+/**
+ * A caught value's message.
+ *
+ * `catch (error)` binds `unknown`, and reading `.message` off it assumes every
+ * throw is an `Error` - a rejected fetch or a thrown string would render
+ * `undefined` into the banner the user reads.
+ */
+function messageOf(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
+
+function publicPostUrl(slug: string) {
   return `${publicBlogBaseUrl}/${encodeURIComponent(String(slug))}`
 }
 
@@ -256,13 +272,13 @@ const filteredPosts = derived(() => {
   })
 })
 
-function statusClass(draft) {
+function statusClass(draft: boolean) {
   return draft
     ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
     : 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200'
 }
 
-function formatDate(value) {
+function formatDate(value: string | number | Date | null | undefined) {
   if (!value)
     return 'No date'
 
@@ -278,7 +294,7 @@ function clearFilters() {
   statusFilter.set('all')
 }
 
-async function openEditor(post) {
+async function openEditor(post: BlogPost) {
   const requestId = ++editorRequestId
   formError.set('')
   editingPost.set(post)
@@ -293,7 +309,7 @@ async function openEditor(post) {
   await loadEditorBody(post, requestId)
 }
 
-async function loadEditorBody(post, requestId = ++editorRequestId) {
+async function loadEditorBody(post: BlogPost, requestId = ++editorRequestId) {
   bodyLoading.set(true)
   bodyLoadFailed.set(false)
   formError.set('')
@@ -307,7 +323,7 @@ async function loadEditorBody(post, requestId = ++editorRequestId) {
   catch (error) {
     if (requestId === editorRequestId) {
       bodyLoadFailed.set(true)
-      formError.set(`Couldn't load this post's content: ${error.message}`)
+      formError.set(`Couldn't load this post's content: ${messageOf(error)}`)
     }
   }
   finally {
@@ -335,7 +351,7 @@ function closeEditor() {
   formError.set('')
 }
 
-async function submit(draft) {
+async function submit(draft: BlogPostDraft) {
   isSaving.set(true)
   formError.set('')
 
@@ -351,14 +367,14 @@ async function submit(draft) {
   }
   catch (error) {
     // Keep the editor open on failure so the author's work is not thrown away.
-    formError.set(error.message)
+    formError.set(messageOf(error))
   }
   finally {
     isSaving.set(false)
   }
 }
 
-function askDelete(post) {
+function askDelete(post: BlogPost) {
   deleteError.set('')
   postToDelete.set(post)
 }
@@ -384,7 +400,7 @@ async function confirmDelete() {
     postToDelete.set(null)
   }
   catch (error) {
-    deleteError.set(`Couldn't delete "${post.title}": ${error.message}`)
+    deleteError.set(`Couldn't delete "${post.title}": ${messageOf(error)}`)
   }
   finally {
     isDeleting.set(false)
@@ -399,7 +415,7 @@ async function load() {
     posts.set(list)
   }
   catch (error) {
-    loadError.set(error.message)
+    loadError.set(messageOf(error))
   }
   finally {
     isLoading.set(false)
@@ -408,5 +424,11 @@ async function load() {
 
 // onMount, not effect: load() writes the same `posts` signal the derived signals
 // read, so an effect would re-trigger itself on every load.
-onMount(load)
+//
+// Wrapped rather than passed directly. `onMount` takes `() => void | StxCleanup`,
+// and an async function returns a promise - which stx would treat as the
+// cleanup value if it took one, and which hides a rejection either way. `load`
+// handles its own errors into `loadError`, so the promise is deliberately
+// dropped here.
+onMount(() => { void load() })
 </script>

package/resources/components/Dashboard/Content/ContentDashboard.stx

@@ -1,6 +1,7 @@
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import type { ChartCtor, ChartDataset, ChartLike, ChartOptions } from '~/storage/framework/defaults/views/dashboard/composables/useChart'
 import { useChart } from '~/storage/framework/defaults/views/dashboard/composables/useChart'
 
 interface ContentPostSummary {
@@ -49,30 +50,6 @@ interface ContentOverview {
   }
 }
 
-interface ChartDataset {
-  data: number[]
-  label?: string
-  backgroundColor?: string | string[]
-  borderColor?: string | string[]
-  borderWidth?: number
-  fill?: boolean
-  tension?: number
-}
-
-interface ChartLike {
-  data: {
-    labels: string[]
-    datasets: ChartDataset[]
-  }
-  destroy: () => void
-  update: () => void
-}
-
-type ChartCtor = new (
-  canvas: HTMLElement,
-  config: { type: string, data: unknown, options?: unknown },
-) => ChartLike
-
 const emptyOverview = (): ContentOverview => ({
   rangeDays: 30,
   stats: { posts: 0, pages: 0, comments: 0, views: 0 },
@@ -162,7 +139,7 @@ function categoriesChartData() {
   }
 }
 
-const chartOptions = {
+const chartOptions: ChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
@@ -178,7 +155,7 @@ const chartOptions = {
   },
 }
 
-const categoryChartOptions = {
+const categoryChartOptions: ChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
   plugins: {

package/resources/components/Dashboard/Email/EmailActivityDashboard.stx

@@ -1,22 +1,9 @@
 <script client>
 import type { InboxActivity, InboxActivityRange } from '../../../../functions/inbox'
 import { fetchInboxActivity } from '../../../../functions/inbox'
+import type { ChartCtor, ChartLike, ChartOptions } from '../../../../views/dashboard/composables/useChart'
 import { useChart } from '../../../../views/dashboard/composables/useChart'
 
-interface ChartLike {
-  destroy: () => void
-  update: () => void
-  data: {
-    labels: string[]
-    datasets: Array<{ data: number[] }>
-  }
-}
-
-type ChartCtor = new (
-  canvas: HTMLElement,
-  config: { type: string, data: unknown, options?: unknown },
-) => ChartLike
-
 const folders = [
   { id: 'inbox', name: 'Inbox', icon: 'inbox' },
   { id: 'starred', name: 'Starred', icon: 'star' },
@@ -165,7 +152,7 @@ function chartData(data: InboxActivity) {
   }
 }
 
-const chartOptions = {
+const chartOptions: ChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
   interaction: { mode: 'index', intersect: false },

package/resources/components/Dashboard/Environment/EnvironmentDashboard.stx

@@ -27,6 +27,14 @@ const envValues = state('')
 const revision = state('')
 const backupContent = state('')
 const backupUpdatedAt = state<string | null>(null)
+
+// Formatted here rather than in the template: `:if` is a sibling attribute on
+// the same element, not a wrapper around the expression, so it cannot narrow
+// `backupUpdatedAt()` away from null for the `:text` beside it.
+const backupSavedLabel = derived(() => {
+  const savedAt = backupUpdatedAt()
+  return savedAt ? `Saved ${new Date(savedAt).toLocaleString()}` : ''
+})
 const showAddModal = state(false)
 const showBackupModal = state(false)
 const isLoading = state(true)
@@ -287,7 +295,7 @@ onMount(() => void loadEnvironment())
     @close="showBackupModal.set(false)"
   >
     <div class="space-y-3">
-      <p :if="backupUpdatedAt()" class="text-stone-500 text-xs dark:text-neutral-400" :text="`Saved ${new Date(backupUpdatedAt()).toLocaleString()}`"></p>
+      <p :if="backupUpdatedAt()" class="text-stone-500 text-xs dark:text-neutral-400" :text="backupSavedLabel()"></p>
       <textarea readonly rows="18" class="block p-4 w-full font-mono leading-6 text-[#c9d1d9] text-xs bg-[#0d1117] border border-[#30363d] rounded-lg resize-y" :value="backupContent()"></textarea>
     </div>
     <template #footer>