@stacksjs/defaults 0.72.97 → 0.72.99

package/resources/components/Dashboard/Kanban/KanbanBoardDashboard.stx

@@ -29,7 +29,7 @@
   const columns = derived(() => kanban.currentColumns())
   // Inline composer state. Each column has its own (independent) "add
   // card" composer; the boolean tracks whether the input is open.
-  const composingCardForColumnId = state(null)
+  const composingCardForColumnId = state<number | null>(null)
   const draftCardTitle = state('')
   const composingNewColumn = state(false)
   const draftColumnName = state('')
@@ -111,15 +111,16 @@
   // Column color → header accent class. Free-form string in the
   // model, mapped here so a new hue without an explicit mapping
   // falls back to slate.
-  function columnAccentClass(color) {
-    return ({
+  function columnAccentClass(color: string) {
+    const swatches: Record<string, string> = {
       slate: 'bg-slate-100 dark:bg-slate-800',
       amber: 'bg-amber-100 dark:bg-amber-900/40',
       blue: 'bg-blue-100 dark:bg-blue-900/40',
       emerald: 'bg-emerald-100 dark:bg-emerald-900/40',
       red: 'bg-red-100 dark:bg-red-900/40',
       violet: 'bg-violet-100 dark:bg-violet-900/40',
-    })[color] || 'bg-slate-100 dark:bg-slate-800'
+    }
+    return swatches[color] || 'bg-slate-100 dark:bg-slate-800'
   }
 
   // Pull the id from the URL through the navigation composable.
@@ -130,7 +131,7 @@
 
   // ─── Composer handlers ────────────────────────────────────────────
 
-  function openCardComposer(columnId) {
+  function openCardComposer(columnId: number) {
     composingCardForColumnId.set(columnId)
     draftCardTitle.set('')
   }
@@ -138,7 +139,7 @@
     composingCardForColumnId.set(null)
     draftCardTitle.set('')
   }
-  async function submitCard(columnId) {
+  async function submitCard(columnId: number) {
     const title = draftCardTitle().trim()
     if (!title) {
       closeCardComposer()
@@ -147,7 +148,7 @@
     await kanban.createCard({ columnId, title })
     closeCardComposer()
   }
-  function isComposingFor(columnId) {
+  function isComposingFor(columnId: number) {
     return composingCardForColumnId() === columnId
   }
 
@@ -165,21 +166,22 @@
       closeColumnComposer()
       return
     }
-    if (!board()) return
-    await kanban.createColumn({ boardId: board().id, name })
+    const current = board()
+    if (!current) return
+    await kanban.createColumn({ boardId: current.id, name })
     closeColumnComposer()
   }
 
   // ─── Card detail launcher ─────────────────────────────────────────
 
-  function openDetail(cardId) {
+  function openDetail(cardId: number) {
     kanban.loadUsers() // background-fetch for assignee picker
     kanban.openCardDetail(cardId)
   }
 
   // Label color → tailwind hue. Mirrors the column-accent map but
   // returns a more saturated chip class.
-  function labelChipClass(color) {
+  function labelChipClass(color: string) {
     return ({
       slate:   'bg-slate-100   text-slate-700   dark:bg-slate-800/60  dark:text-slate-200',
       amber:   'bg-amber-100   text-amber-700   dark:bg-amber-900/40  dark:text-amber-200',
@@ -191,7 +193,7 @@
     })[color] || 'bg-slate-100 text-slate-700 dark:bg-slate-800/60 dark:text-slate-200'
   }
 
-  function initialsOf(name, email) {
+  function initialsOf(name: string | null | undefined, email: string | null | undefined) {
     const source = (name || email || '?').trim()
     const parts = source.split(/\s+/).filter(Boolean)
     if (parts.length === 0) return '?'
@@ -199,7 +201,7 @@
     return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
   }
 
-  function formatDueDate(iso) {
+  function formatDueDate(iso: string | null | undefined) {
     if (!iso) return ''
     const d = new Date(iso)
     if (Number.isNaN(d.getTime())) return ''

package/resources/components/Dashboard/Kanban/KanbanBoardsDashboard.stx

@@ -99,18 +99,19 @@
     }
   }
 
-  function colorSwatchClass(c) {
-    return ({
+  function colorSwatchClass(c: string) {
+    const swatches: Record<string, string> = {
       violet: 'bg-violet-500',
       blue: 'bg-blue-500',
       emerald: 'bg-emerald-500',
       amber: 'bg-amber-500',
       rose: 'bg-rose-500',
       slate: 'bg-slate-500',
-    })[c] || 'bg-violet-500'
+    }
+    return swatches[c] || 'bg-violet-500'
   }
 
-  function colorButtonClass(c) {
+  function colorButtonClass(c: string) {
     const base = `w-6 h-6 rounded-full ${colorSwatchClass(c)} cursor-pointer transition-all `
     return draftColor() === c
       ? base + 'ring-2 ring-offset-2 ring-violet-500 dark:ring-offset-zinc-950'
@@ -120,18 +121,19 @@
   // Color → tailwind class. Free-form string in the model, mapped here
   // so the UI stays stable when a new hue is added without an explicit
   // mapping (falls back to violet).
-  function accentClass(color) {
-    return ({
+  function accentClass(color: string) {
+    const swatches: Record<string, string> = {
       violet: 'bg-violet-500',
       blue: 'bg-blue-500',
       emerald: 'bg-emerald-500',
       amber: 'bg-amber-500',
       rose: 'bg-rose-500',
       slate: 'bg-slate-500',
-    })[color] || 'bg-violet-500'
+    }
+    return swatches[color] || 'bg-violet-500'
   }
 
-  function cardCountText(n) {
+  function cardCountText(n: number) {
     if (n === 0) return 'No cards'
     if (n === 1) return '1 card'
     return n + ' cards'

package/resources/components/Dashboard/Kanban/KanbanCardDialog.stx

@@ -214,7 +214,7 @@ function initialsOf(name: string | null, email: string | null): string {
   return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase()
 }
 
-function formatTimestamp(iso: string | null): string {
+function formatTimestamp(iso: string | null | undefined): string {
   if (!iso)
     return ''
   const date = new Date(iso)
@@ -286,7 +286,7 @@ function formatTimestamp(iso: string | null): string {
             </div>
           </div>
 
-          <div :if="openCard().comments.length === 0 && !loadingCard()" class="italic text-zinc-400 text-xs">No comments yet.</div>
+          <div :if="cardComments().length === 0 && !loadingCard()" class="italic text-zinc-400 text-xs">No comments yet.</div>
           <ul class="space-y-3">
             <li :for="comment in cardComments" class="flex gap-3">
               <span class="inline-flex flex-shrink-0 items-center justify-center h-7 w-7 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(comment.authorName, comment.authorEmail)"></span>
@@ -334,14 +334,14 @@ function formatTimestamp(iso: string | null): string {
 
           <div :if="!showLabelPicker()" class="flex flex-wrap gap-1">
             <span :for="label in cardLabels" :class="`px-2 py-0.5 text-xs font-medium rounded ${labelChipClass(label.color)}`" :text="label.name"></span>
-            <span :if="openCard().labels.length === 0" class="italic text-zinc-400 text-xs">None</span>
+            <span :if="cardLabels().length === 0" class="italic text-zinc-400 text-xs">None</span>
           </div>
 
           <div :if="showLabelPicker()" class="space-y-2">
             <div :for="label in allLabels" :class="`flex items-center gap-1 px-1 py-0.5 w-full rounded ${labelChipClass(label.color)}`">
-              <button type="button" class="flex flex-1 items-center justify-between px-1 py-0.5 min-w-0 text-left text-xs rounded hover:opacity-90" :aria-pressed="String(openCard().labels.some(cardLabel => cardLabel.id === label.id))" @click="toggleLabel(label.id)">
+              <button type="button" class="flex flex-1 items-center justify-between px-1 py-0.5 min-w-0 text-left text-xs rounded hover:opacity-90" :aria-pressed="String(cardLabels().some(cardLabel => cardLabel.id === label.id))" @click="toggleLabel(label.id)">
                 <span class="truncate" :text="label.name"></span>
-                <span :if="openCard().labels.some(cardLabel => cardLabel.id === label.id)" class="h-3 w-3 i-hugeicons-tick-02"></span>
+                <span :if="cardLabels().some(cardLabel => cardLabel.id === label.id)" class="h-3 w-3 i-hugeicons-tick-02"></span>
               </button>
               <Button variant="ghost" size="xs" iconOnly :ariaLabel="'Delete label ' + label.name" @click="requestDelete('label', label.id)">
                 <span class="block h-3 w-3 text-red-500 i-hugeicons-cancel-01"></span>
@@ -376,15 +376,15 @@ function formatTimestamp(iso: string | null): string {
               <span class="inline-flex items-center justify-center h-6 w-6 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(assignee.name, assignee.email)"></span>
               <span :text="assignee.name || assignee.email || 'Unknown'"></span>
             </div>
-            <span :if="openCard().assignees.length === 0" class="italic text-zinc-400 text-xs">Unassigned</span>
+            <span :if="cardAssignees().length === 0" class="italic text-zinc-400 text-xs">Unassigned</span>
           </div>
 
           <div :if="showAssigneePicker()" class="overflow-y-auto space-y-1 max-h-48">
             <p :if="kanban.users().length === 0" class="italic text-zinc-400 text-xs">No users to assign.</p>
-            <button :for="user in kanban.users" type="button" :aria-pressed="String(openCard().assignees.some(assignee => assignee.userId === user.id))" @click="toggleAssignee(user.id)" class="flex gap-2 items-center px-2 py-1.5 w-full text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded">
+            <button :for="user in kanban.users" type="button" :aria-pressed="String(cardAssignees().some(assignee => assignee.userId === user.id))" @click="toggleAssignee(user.id)" class="flex gap-2 items-center px-2 py-1.5 w-full text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded">
               <span class="inline-flex flex-shrink-0 items-center justify-center h-6 w-6 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(user.name, user.email)"></span>
               <span class="flex-1 text-zinc-700 truncate dark:text-zinc-200" :text="user.name || user.email"></span>
-              <span :if="openCard().assignees.some(assignee => assignee.userId === user.id)" class="h-3.5 w-3.5 text-violet-500 i-hugeicons-tick-02"></span>
+              <span :if="cardAssignees().some(assignee => assignee.userId === user.id)" class="h-3.5 w-3.5 text-violet-500 i-hugeicons-tick-02"></span>
             </button>
           </div>
         </section>
@@ -395,8 +395,8 @@ function formatTimestamp(iso: string | null): string {
         </section>
 
         <section class="pt-3 border-t border-zinc-200 dark:border-zinc-800">
-          <p class="text-[10px] text-zinc-400">Created <span :text="formatTimestamp(openCard().createdAt)"></span></p>
-          <p :if="openCard().updatedAt && openCard().updatedAt !== openCard().createdAt" class="text-[10px] text-zinc-400">Updated <span :text="formatTimestamp(openCard().updatedAt)"></span></p>
+          <p class="text-[10px] text-zinc-400">Created <span :text="formatTimestamp(openCard()?.createdAt)"></span></p>
+          <p :if="openCard()?.updatedAt && openCard()?.updatedAt !== openCard()?.createdAt" class="text-[10px] text-zinc-400">Updated <span :text="formatTimestamp(openCard()?.updatedAt)"></span></p>
         </section>
       </aside>
     </div>

package/resources/components/Dashboard/Management/PermissionsDashboard.stx

@@ -63,14 +63,14 @@
 
   const activeTab = state('roles')
 
-  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 selectTab(id) {
+  function selectTab(id: string) {
     activeTab.set(id)
     selectedUser.set(null)
     selectedRole.set(null)
@@ -315,7 +315,7 @@
 
   // ─── Tiny formatters ──────────────────────────────────────────
 
-  function formatDate(iso) {
+  function formatDate(iso: string | null | undefined) {
     if (!iso) return ''
     const d = new Date(iso)
     if (Number.isNaN(d.getTime())) return ''

package/resources/components/Dashboard/Modals/Popups/Alert.stx

@@ -9,7 +9,10 @@ const liveAbortText = useReactiveProp('abortText', 'Cancel')
 const liveShow = useReactiveProp('show', true)
 const emit = defineEmits()
 
-const normalizedType = derived(() => liveType() === 'danger' ? 'error' : liveType())
+const normalizedType = derived((): Exclude<AlertType, 'danger'> => {
+  const type = liveType()
+  return type === 'danger' ? 'error' : type
+})
 const iconClass = derived(() => ({
   info: 'i-hugeicons-information-circle text-blue-600',
   warning: 'i-hugeicons-alert-02 text-yellow-600',

package/resources/components/Dashboard/Navbar.stx

@@ -9,7 +9,7 @@ interface NavbarProps {
 
 const { isSidebarCollapsed = false, currentPath = '/' } = defineProps<NavbarProps>()
 
-function isActiveRoute(path) {
+function isActiveRoute(path: string) {
   return currentPath === path || currentPath.startsWith(path + '/')
 }
 

package/resources/components/Dashboard/Settings/AppearanceSettingsDashboard.stx

@@ -12,9 +12,14 @@ export const navSections = buildWebSidebarSections()
     label: section.label,
     count: section.items.length,
   }))
+
+// Declared so the client block below gets `navSections` typed rather than
+// inferred off the implicit bridge.
+defineClientPayload({ navSections })
 </script>
 
 <script client>
+import type { ColorMode, SidebarStyle } from '~/storage/framework/defaults/views/dashboard/composables/useAppearance'
 import {
   COLOR_MODE_OPTIONS,
   SIDEBAR_STYLE_OPTIONS,
@@ -37,20 +42,20 @@ const hiddenSections = appearance.hiddenSections
 
 const hiddenCount = derived(() => hiddenSections().length)
 
-function selectStyle(id) {
+function selectStyle(id: SidebarStyle) {
   appearance.setSidebarStyle(id)
 }
 
-function selectColorMode(id) {
+function selectColorMode(id: ColorMode) {
   appearance.setColorMode(id)
 }
 
-function isVisible(id) {
+function isVisible(id: string) {
   return !hiddenSections().includes(id)
 }
 
-function toggleSection(id, event) {
-  appearance.toggleSection(id, event.target.checked)
+function toggleSection(id: string, event: Event) {
+  appearance.toggleSection(id, (event.target as HTMLInputElement).checked)
 }
 
 function resetAll() {
@@ -64,7 +69,7 @@ function resetAll() {
 // upstream. It stays because it is the better shape regardless: one selector
 // per state in the block below, rather than two class strings kept in sync by
 // hand inside a ternary.
-const selected = (a, b) => String(a === b)
+const selected = (a: unknown, b: unknown) => String(a === b)
 </script>
 
 <style>

package/resources/components/Dashboard/Settings/SettingsDashboard.stx

@@ -247,8 +247,8 @@ void loadFiles()
       @elseif(selectedFile())
         <div class="flex flex-wrap gap-4 items-center justify-between px-6 py-5 border-b border-neutral-200/60 dark:border-white/5">
           <div>
-            <h2 class="font-semibold text-lg text-neutral-900 dark:text-white">{{ selectedFile().title }}</h2>
-            <p class="mt-1 font-mono text-neutral-500 text-xs dark:text-neutral-400">config/{{ selectedFile().name }}.ts</p>
+            <h2 class="font-semibold text-lg text-neutral-900 dark:text-white">{{ selectedFile()?.title }}</h2>
+            <p class="mt-1 font-mono text-neutral-500 text-xs dark:text-neutral-400">config/{{ selectedFile()?.name }}.ts</p>
           </div>
           <div class="flex gap-2 items-center">
             <Badge :if="isDirty()" variant="warning" size="sm">Unsaved changes</Badge>

package/resources/components/Dashboard/Transaction/index.stx

@@ -5,21 +5,21 @@ interface indexProps {
 
 const { transactionHistory = [] } = defineProps<indexProps>()
 
-function formatTimestampDate(timestamp) {
+function formatTimestampDate(timestamp: number) {
     if (!timestamp) return ''
     const date = new Date(timestamp * 1000)
     return date.toLocaleDateString()
   }
 
-  function getTransactionType(lineData) {
-    return lineData[0]?.plan?.interval || ''
+  function getTransactionType(lineData: Array<{ plan?: { interval?: string } }> | undefined) {
+    return lineData?.[0]?.plan?.interval || ''
   }
 
-  function getUnitPrice(lineData) {
-    return (Number(lineData[0]?.price?.unit_amount || 0) / 100).toFixed(2)
+  function getUnitPrice(lineData: Array<{ price?: { unit_amount?: number | string } }> | undefined) {
+    return (Number(lineData?.[0]?.price?.unit_amount || 0) / 100).toFixed(2)
   }
 
-  function getLastDigits(paymentIntent) {
+  function getLastDigits(paymentIntent: { payment_method?: { card?: { last4?: string } } } | undefined) {
     return paymentIntent?.payment_method?.card?.last4 || ''
   }
 </script>

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

@@ -43,7 +43,7 @@ const statusSizes = {
 }
 
 // Generate initials from name
-function getInitials(fullName) {
+function getInitials(fullName: string) {
   if (!fullName) return ''
   const parts = fullName.trim().split(/\s+/)
   if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
@@ -66,7 +66,7 @@ const bgColors = [
   'bg-pink-500/15 text-pink-600 dark:bg-pink-400/20 dark:text-pink-400'
 ]
 
-function getBgColorIndex(fullName) {
+function getBgColorIndex(fullName: string) {
   if (!fullName) return 0
   let hash = 0
   for (let i = 0; i < fullName.length; i++) {

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

@@ -47,7 +47,7 @@ const classes = getClasses()
     >
       <!-- Leading icon slot -->
       <span class="flex items-center justify-center h-4 w-4 text-current opacity-70">
-        {{ iconSlot }}
+        <slot name="icon" />
       </span>
 
       <!-- Content -->
@@ -56,7 +56,7 @@ const classes = getClasses()
       </span>
 
       <!-- Trailing content slot (for shortcuts, badges, etc.) -->
-      {{ trailingSlot }}
+      <slot name="trailing" />
     </a>
   @else
     <button
@@ -66,7 +66,7 @@ const classes = getClasses()
     >
       <!-- Leading icon slot -->
       <span class="flex items-center justify-center h-4 w-4 text-current opacity-70">
-        {{ iconSlot }}
+        <slot name="icon" />
       </span>
 
       <!-- Content -->
@@ -75,6 +75,6 @@ const classes = getClasses()
       </span>
 
       <!-- Trailing content slot (for shortcuts, badges, etc.) -->
-      {{ trailingSlot }}
+      <slot name="trailing" />
     </button>
   @endif

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

@@ -1,3 +1,18 @@
+<!--
+  Replica window controls, for chrome the page draws itself.
+
+  They yield to the real thing. Wherever the platform already drew its own
+  close/minimise/zoom buttons - which on macOS is every Craft window that is not
+  frameless - rendering these as well puts six circles in the corner, three of
+  them the wrong shade, without hover glyphs, and dead to the keyboard. Craft
+  says so by setting `--craft-window-controls-replicas: none` before the
+  document is parsed, and both variants below read it as a fallback, so a
+  browser (where nothing is published) still shows them and neither case needs
+  JavaScript or can flash.
+
+  Use them for a frameless window, where the page really does own its chrome,
+  and for a web dashboard that wants the look of one.
+-->
 <script client>
 import { useWindowControls } from '../../../../functions/craft'
 
@@ -41,7 +56,7 @@ async function handleMaximize(): Promise<void> {
 }
 </script>
 
-<div :if="liveVariant() === 'macos'" class="flex items-center" :class="config().gap" data-window-controls>
+<div :if="liveVariant() === 'macos'" class="items-center" style="display: var(--craft-window-controls-replicas, flex)" :class="config().gap" data-window-controls>
   <span class="flex gap-1.5 items-center">
     <button
       type="button"
@@ -85,7 +100,7 @@ async function handleMaximize(): Promise<void> {
   </span>
 </div>
 
-<div :else class="flex items-center">
+<div :else class="items-center" style="display: var(--craft-window-controls-replicas, flex)" data-window-controls>
   <button
     type="button"
     class="flex items-center justify-center h-8 w-12 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"

package/resources/components/Docs/Demo/ComboboxDemo.stx

@@ -1,7 +1,12 @@
 <script>
+interface ComboboxItem {
+  id: number
+  name: string
+}
+
 interface ComboboxDemoProps {
-  listItems?: Array<{ id: number, name: string }>
-  selected?: any
+  listItems?: ComboboxItem[]
+  selected?: ComboboxItem | null
   query?: string
   isOpen?: boolean
 }
@@ -13,7 +18,7 @@ const { listItems = [
   { id: 4, name: 'Michael Vincent' },
   { id: 5, name: 'Blake Ayer' },
 ], selected = null, query = '', isOpen = false } = defineProps<ComboboxDemoProps>()
-function filterItems(items, query) {
+function filterItems(items: ComboboxItem[], query: string): ComboboxItem[] {
   if (query === '') return items
   return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()))
 }

package/resources/components/Docs/Demo/DropdownDemo.stx

@@ -21,9 +21,9 @@ const { menuItems = [
   { divider: true },
   { icon: 'i-hugeicons-trash-20-solid', label: 'Delete', variant: 'danger' },
 ], isOpen = false } = defineProps<DropdownDemoProps>()
-function getMenuSections(items) {
-  const sections = []
-  let currentSection = []
+function getMenuSections(items: DropdownMenuItem[]): DropdownMenuItem[][] {
+  const sections: DropdownMenuItem[][] = []
+  let currentSection: DropdownMenuItem[] = []
 
   for (const item of items) {
     if (item.divider) {

package/resources/components/Docs/Demo/StepperDemo.stx

@@ -10,7 +10,7 @@ const { currentStep = 0, steps = [
   { title: 'Step 3', description: 'Third step', icon: 'i-heroicons-check' },
 ] } = defineProps<StepperDemoProps>()
 
-function getStepContent(step) {
+function getStepContent(step: number): { title: string, description: string } {
   switch (step) {
     case 0:
       return { title: 'Personal Information', description: 'Please provide your basic details' }

package/resources/components/Forum/ForumLayout.stx

@@ -5,7 +5,7 @@ interface ForumLayoutProps {
 
 const { route = 'forum' } = defineProps<ForumLayoutProps>()
 
-function isActiveRoute(currentRoute, targetRoute) {
+function isActiveRoute(currentRoute: string, targetRoute: string): boolean {
   return currentRoute === targetRoute
 }
 </script>

package/resources/components/Forum/ForumReplyForm.stx

@@ -6,7 +6,7 @@ interface ForumReplyFormProps {
 
 const { replyContent = '', notifyOnReply = true } = defineProps<ForumReplyFormProps>()
 
-function canSubmit(content) {
+function canSubmit(content: string) {
   return content.trim().length > 0
 }
 </script>

package/resources/components/Marketing/ComingSoon.stx

@@ -84,15 +84,15 @@ defineProps<ComingSoonProps>()
 // Client-side wiring for the holding-page email form. The endpoint
 // itself (/api/email/subscribe) is rate-limited server-side; this
 // handler just gives the visitor immediate feedback.
-const form = document.getElementById('coming-soon-form')
-const emailInput = document.getElementById('coming-soon-email')
-const submitBtn = document.getElementById('coming-soon-submit')
+const form = document.getElementById('coming-soon-form') as HTMLFormElement | null
+const emailInput = document.getElementById('coming-soon-email') as HTMLInputElement | null
+const submitBtn = document.getElementById('coming-soon-submit') as HTMLButtonElement | null
 const submitLabel = document.getElementById('coming-soon-submit-label')
 const spinner = document.getElementById('coming-soon-spinner')
 const errorEl = document.getElementById('coming-soon-error')
 const successEl = document.getElementById('coming-soon-success')
 
-function setLoading(loading) {
+function setLoading(loading: boolean) {
   if (!submitBtn || !submitLabel || !spinner) return
   submitBtn.disabled = loading
   submitBtn.classList.toggle('opacity-50', loading)
@@ -100,7 +100,7 @@ function setLoading(loading) {
   spinner.classList.toggle('hidden', !loading)
 }
 
-function showError(message) {
+function showError(message: string) {
   if (!errorEl) return
   errorEl.textContent = message
   errorEl.classList.remove('hidden')