@stacksjs/defaults 0.70.257 → 0.70.259

package/ide/cursor/rules/auto-imports.mdc

@@ -1,6 +1,6 @@
 ---
 description: Auto Imports for Stacks projects
-globs: 
+globs:
 ---
 ## Auto Imports
 

package/ide/cursor/rules/code-style.mdc

@@ -1,6 +1,6 @@
 ---
 description: Code Style & Structure specifics
-globs: 
+globs:
 ---
 ## Code Style & Structure
 

package/ide/cursor/rules/error-handling-validation.mdc

@@ -1,6 +1,6 @@
 ---
 description: Error Handling and Validation specifics
-globs: 
+globs:
 ---
 ## Error Handling and Validation
 
@@ -8,4 +8,4 @@ globs:
 - Use early returns and guard clauses
 - Implement proper error logging and user-friendly messages
 - Use error boundaries for unexpected errors
-- Use `@stacksjs/error-handling`, which is similar to neverthrow, to handle errors and responses 
+- Use `@stacksjs/error-handling`, which is similar to neverthrow, to handle errors and responses

package/ide/cursor/rules/key-conventions.mdc

@@ -1,6 +1,6 @@
 ---
 description: Key code conventions
-globs: 
+globs:
 ---
 ## Key Conventions
 

package/ide/cursor/rules/project-structure.mdc

@@ -1,6 +1,6 @@
 ---
 description: Project structure information
-globs: 
+globs:
 ---
 ## Project Structure
 

package/ide/cursor/rules/syntax-formatting.mdc

@@ -1,6 +1,6 @@
 ---
 description: Syntax and Formatting specifics
-globs: 
+globs:
 ---
 ## Syntax and Formatting
 

package/ide/cursor/rules/testing.mdc

@@ -1,6 +1,6 @@
 ---
 description: Testing specifics
-globs: 
+globs:
 ---
 ## Testing
 

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.70.257",
+  "version": "0.70.259",
   "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.257",
+  "version": "0.70.259",
   "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",
@@ -29,8 +29,19 @@
     "project"
   ],
   "exports": {
-    "./*": "./*",
-    "./package.json": "./package.json"
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "bun": "./dist/*.js",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    },
+    "./package.json": "./package.json",
+    "./*.js": {
+      "types": "./dist/*.d.ts",
+      "bun": "./dist/*.js",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    }
   },
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",

package/project/buddy

@@ -53,7 +53,11 @@ run_with_timeout() {
   cmd_pid=$!
 
   (
-    sleep "${timeout_seconds}"
+    # Do not let the timer inherit a caller's stdout/stderr pipe. If the
+    # watchdog shell is terminated after the command finishes, its sleep may
+    # briefly remain orphaned; inherited deploy pipes would otherwise stay
+    # open until the full timeout elapsed.
+    sleep "${timeout_seconds}" </dev/null >/dev/null 2>&1
 
     if kill -0 "${cmd_pid}" 2>/dev/null; then
       echo "Command timed out after ${timeout_seconds}s: $*" >&2

package/resources/components/Container.stx

@@ -5,6 +5,6 @@ interface ContainerProps {
 
 const { className = '' } = defineProps<ContainerProps>()
 </script>
-<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl {{ }} className">
+<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 {{ className }}">
     <slot />
   </div>

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

@@ -56,7 +56,7 @@ function filterItems(items, query) {
                     data-item-id="{{ item.id }}"
                     data-item-name="{{ item.name }}"
                   >
-                    <span class="block truncate selected selected.id : ? 'font-medium' 'font-normal' {{ }} && == item.id">
+                    <span class="block truncate {{ selected && selected.id == item.id ? 'font-medium' : 'font-normal' }}">
                       {{ item.name }}
                     </span>
                     @if(selected && selected.id == item.id)

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

@@ -10,13 +10,13 @@ const { isPreviewMode = true } = defineProps<DocsPlaygroundProps>()
     <div class="relative bg-gray-100 dark:bg-neutral-800 rounded-lg">
       <div class="flex items-stretch justify-end px-3 py-1 md:m-1 bg-gray-100 dark:bg-neutral-800 rounded-t-[10px] md:rounded-lg">
         <button
-          class="flex mr-1 px-3 py-2 font-medium text-blue-500' text-xs dark:text-neutral-300 hover:bg-gray-300 dark:hover:bg-neutral-600' rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 pointer-events-auto : ? 'bg-white 'text-gray-600 {{ }} isPreviewMode"
+          class="pointer-events-auto mr-1 flex rounded-md px-3 py-2 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 {{ isPreviewMode ? 'bg-white text-blue-500' : 'text-gray-600 dark:text-neutral-300 hover:bg-gray-300 dark:hover:bg-neutral-600' }}"
           data-action="toggle-preview"
         >
           Preview
         </button>
         <button
-          class="flex px-3 py-2 font-medium text-blue-500' text-xs dark:text-neutral-300 hover:bg-gray-300 dark:hover:bg-neutral-600' rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 pointer-events-auto : !isPreviewMode ? 'bg-white 'text-gray-600 {{ }}"
+          class="pointer-events-auto flex rounded-md px-3 py-2 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 {{ !isPreviewMode ? 'bg-white text-blue-500' : 'text-gray-600 dark:text-neutral-300 hover:bg-gray-300 dark:hover:bg-neutral-600' }}"
           data-action="toggle-code"
         >
           Code

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

@@ -45,7 +45,7 @@ function getMenuSections(items) {
           data-action="toggle-dropdown"
         >
           Options
-          <div class="h-5 w-5 duration-200 transition-transform : ? '' 'rotate-180' {{ }} i-hugeicons-chevron-down-20-solid isOpen"></div>
+          <div class="i-hugeicons-chevron-down-20-solid w-5 h-5 transition-transform duration-200 {{ isOpen ? 'rotate-180' : '' }}"></div>
         </button>
 
         @if(isOpen)
@@ -55,11 +55,11 @@ function getMenuSections(items) {
                 @foreach(section as item)
                   <button
                     type="button"
-                    class="flex relative items-center px-2 py-2 w-full text-sm hover:bg-gray-50' hover:bg-red-50' outline-none rounded-md transition-colors : ? 'danger' 'text-gray-700 'text-red-600 {{ }} == group item.variant"
+                    class="group relative flex w-full items-center rounded-md px-2 py-2 text-sm outline-none transition-colors {{ item.variant == 'danger' ? 'text-red-600 hover:bg-red-50' : 'text-gray-700 hover:bg-gray-50' }}"
                     data-action="menu-item"
                     data-item-label="{{ item.label }}"
                   >
-                    <div class="mr-2 h-5 w-5 group-hover:text-gray-700' : ? 'danger' 'text-gray-500 'text-red-600' {{ {{ }} }} == item.icon item.variant"></div>
+                    <div class="{{ item.icon }} mr-2 h-5 w-5 {{ item.variant == 'danger' ? 'text-red-600' : 'text-gray-500 group-hover:text-gray-700' }}"></div>
                     {{ item.label }}
                   </button>
                 @endforeach

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

@@ -32,12 +32,12 @@ const { people = [, selectedPerson = people[0], isOpen = false } = defineProps<L
           <div class="absolute overflow-auto mt-1 py-1 max-h-60 w-full text-base sm:text-sm bg-white outline-none ring-1 ring-black/5 rounded-md focus:outline-none shadow-lg">
             @foreach(people as person)
               <div
-                class="relative pl-10 pr-4 py-2 list-none text-amber-900' hover:text-amber-900 hover:bg-amber-100 cursor-default select-none selectedPerson.id : ? 'bg-amber-100 'text-gray-900' {{ }} == person.id"
+                class="list-none relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-amber-100 hover:text-amber-900 {{ selectedPerson.id == person.id ? 'bg-amber-100 text-amber-900' : 'text-gray-900' }}"
                 data-action="select-person"
                 data-person-id="{{ person.id }}"
                 data-person-name="{{ person.name }}"
               >
-                <span class="block truncate selectedPerson.id : ? 'font-medium' 'font-normal' {{ }} == person.id">
+                <span class="block truncate {{ selectedPerson.id == person.id ? 'font-medium' : 'font-normal' }}">
                   {{ person.name }}
                 </span>
                 @if(selectedPerson.id == person.id)

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

@@ -34,7 +34,7 @@ const { solutions = [, isOpen = false } = defineProps<PopoverDemoProps>()
     <div class="items-center mx-auto my-12 space-y-4 h-[150px] w-3/5">
       <div class="relative">
         <button
-          class="inline-flex gap-2 items-center justify-center px-4 py-2.5 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-sm duration-200 transition-all : ? 'text-white' 'text-white/90' {{ }} group isOpen"
+          class="group inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-200 {{ isOpen ? 'text-white' : 'text-white/90' }}"
           data-action="toggle-popover"
         >
           <span>Example</span>

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

@@ -16,17 +16,17 @@ const { plans = [, selected = plans[0] } = defineProps<RadioGroupDemoProps>()
       <div class="space-y-2">
         @foreach(plans as plan)
           <div
-            class="flex relative px-5 py-4 text-white ring-2 ring-offset-2 ring-offset-sky-300' ring-white/60 rounded-lg focus:outline-none shadow-md cursor-pointer selected.name : ? 'bg-sky-900/75 'bg-white' {{ }} == plan.name"
+            class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none {{ selected.name == plan.name ? 'bg-sky-900/75 text-white ring-2 ring-white/60 ring-offset-2 ring-offset-sky-300' : 'bg-white' }}"
             data-action="select-plan"
             data-plan-name="{{ plan.name }}"
           >
             <div class="flex items-center justify-between w-full">
               <div class="flex items-center">
                 <div class="text-sm">
-                  <p class="font-medium selected.name : ? 'text-gray-900' 'text-white' {{ }} == plan.name">
+                  <p class="font-medium {{ selected.name == plan.name ? 'text-white' : 'text-gray-900' }}">
                     {{ plan.name }}
                   </p>
-                  <span class="inline selected.name : ? 'text-gray-500' 'text-sky-100' {{ }} == plan.name">
+                  <span class="inline {{ selected.name == plan.name ? 'text-sky-100' : 'text-gray-500' }}">
                     <span>{{ plan.ram }}/{{ plan.cpus }}</span>
                     <span aria-hidden="true"> &middot; </span>
                     <span>{{ plan.disk }}</span>

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

@@ -30,19 +30,19 @@ function getStepContent(step) {
       <!-- Stepper indicator -->
       <div class="flex items-center justify-between mb-12">
         @foreach(steps as step)
-          <div class="flex items-center : ? '' 'flex-1' {{ }} loop.last">
+          <div class="flex items-center {{ loop.last ? '' : 'flex-1' }}">
             <div class="flex flex-col items-center">
-              <div class="flex items-center justify-center h-8 w-8 text-blue-600' text-gray-500' ring-blue-600 ring-offset-2' rounded-full : : ? ? '' 'bg-blue-100 'bg-gray-100 'ring-2 {{ {{ }} }} <= == currentStep currentStep loop.index loop.index">
+              <div class="flex items-center justify-center w-8 h-8 rounded-full {{ loop.index <= currentStep ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-500' }} {{ loop.index == currentStep ? 'ring-2 ring-blue-600 ring-offset-2' : '' }}">
                 @if(loop.index < currentStep)
                   <div class="h-5 w-5 i-heroicons-check"></div>
                 @else
                   {{ loop.index + 1 }}
                 @endif
               </div>
-              <span class="mt-2 font-medium' text-sm : ? 'text-blue-600 'text-gray-500' {{ }} == currentStep loop.index">{{ step.title }}</span>
+              <span class="mt-2 text-sm {{ loop.index == currentStep ? 'text-blue-600 font-medium' : 'text-gray-500' }}">{{ step.title }}</span>
             </div>
             @if(!loop.last)
-              <div class="flex-1 mx-4 h-0.5 : ? 'bg-blue-500' 'bg-gray-200' {{ }} < currentStep loop.index"></div>
+              <div class="flex-1 h-0.5 mx-4 {{ loop.index < currentStep ? 'bg-blue-500' : 'bg-gray-200' }}"></div>
             @endif
           </div>
         @endforeach
@@ -108,14 +108,14 @@ function getStepContent(step) {
 
       <div class="flex gap-4 justify-center">
         <button
-          class="px-4 py-2 font-medium text-gray-700 text-sm bg-gray-50 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-not-allowed' : ? '' 'opacity-50 {{ }} == 0 currentStep"
+          class="rounded-md bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 {{ currentStep == 0 ? 'opacity-50 cursor-not-allowed' : '' }}"
           data-action="previous-step"
           {{ currentStep == 0 ? 'disabled' : '' }}
         >
           Previous
         </button>
         <button
-          class="px-4 py-2 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-not-allowed' - : ? '' 'opacity-50 {{ }} == 1 currentStep steps.length"
+          class="rounded-md bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 {{ currentStep == steps.length - 1 ? 'opacity-50 cursor-not-allowed' : '' }}"
           data-action="next-step"
           {{ currentStep == steps.length - 1 ? 'disabled' : '' }}
         >

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

@@ -9,13 +9,13 @@ const { enabled = false } = defineProps<SwitchDemoProps>()
     <DocsPlayground>
       <div class="flex gap-2 items-center justify-center my-3">
         <button
-          class="inline-flex relative shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full focus-visible:ring-2 focus-visible:ring-white/75 focus:outline-none duration-200 ease-in-out transition-colors cursor-pointer : ? 'bg-blue-500' 'bg-gray-400' {{ }} enabled"
+          class="relative h-[38px] w-[74px] inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 {{ enabled ? 'bg-blue-500' : 'bg-gray-400' }}"
           data-action="toggle-switch"
         >
           <span class="sr-only">Use setting</span>
           <span
             aria-hidden="true"
-            class="inline-block h-[34px] w-[34px] bg-white ring-0 rounded-full shadow-lg duration-200 ease-in-out transition transform pointer-events-none : ? 'translate-x-0' 'translate-x-9' {{ }} enabled"
+            class="pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out {{ enabled ? 'translate-x-9' : 'translate-x-0' }}"
           ></span>
         </button>
       </div>

package/resources/components/Forum/ForumBreadcrumb.stx

@@ -20,13 +20,13 @@ const { items = [] } = defineProps<ForumBreadcrumbProps>()
           @if(item.link)
             <a
               href="{{ item.link }}"
-              class="font-medium text-gray-700 text-sm hover:text-blue-600 : ? '' 'ml-1' {{ }} > 0 loop.index"
+              class="text-sm font-medium text-gray-700 hover:text-blue-600 {{ loop.index > 0 ? 'ml-1' : '' }}"
             >
               {{ item.label }}
             </a>
           @else
             <span
-              class="font-medium text-gray-500 text-sm : ? '' 'ml-1' {{ }} > 0 loop.index"
+              class="text-sm font-medium text-gray-500 {{ loop.index > 0 ? 'ml-1' : '' }}"
             >
               {{ item.label }}
             </span>

package/resources/components/Forum/ForumCategoryItem.stx

@@ -13,7 +13,7 @@ const { title = '', description = '', link = '', topicCount = 0, postCount = 0,
 </script>
 <div class="flex items-start p-4 hover:bg-gray-50">
     <div class="flex-shrink-0 mr-4">
-      <div class="flex items-center justify-center h-10 w-10 text-gray-500 bg-gray-100 rounded-full {{ }} icon"></div>
+      <div class="{{ icon }} w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-500"></div>
     </div>
 
     <div class="flex-grow min-w-0">

package/resources/components/Forum/ForumLayout.stx

@@ -19,10 +19,10 @@ function isActiveRoute(currentRoute, targetRoute) {
         </div>
       </div>
       <nav class="flex gap-1 text-sm">
-        <a href="/forum" class="px-3 py-2 font-medium' 'hover:bg-gray-100 rounded-md rounded-md' : ? 'bg-gray-100 'forum') {{ }} isActiveRoute(route,">All Discussions</a>
-        <a href="/forum?filter=popular" class="px-3 py-2 font-medium' 'hover:bg-gray-100 rounded-md rounded-md' : ? 'bg-gray-100 'forum-popular') {{ }} isActiveRoute(route,">Popular</a>
-        <a href="/forum?filter=recent" class="px-3 py-2 font-medium' 'hover:bg-gray-100 rounded-md rounded-md' : ? 'bg-gray-100 'forum-recent') {{ }} isActiveRoute(route,">Recent</a>
-        <a href="/forum?filter=solved" class="px-3 py-2 font-medium' 'hover:bg-gray-100 rounded-md rounded-md' : ? 'bg-gray-100 'forum-solved') {{ }} isActiveRoute(route,">Solved</a>
+        <a href="/forum" class="px-3 py-2 {{ isActiveRoute(route, 'forum') ? 'bg-gray-100 rounded-md font-medium' : 'hover:bg-gray-100 rounded-md' }}">All Discussions</a>
+        <a href="/forum?filter=popular" class="px-3 py-2 {{ isActiveRoute(route, 'forum-popular') ? 'bg-gray-100 rounded-md font-medium' : 'hover:bg-gray-100 rounded-md' }}">Popular</a>
+        <a href="/forum?filter=recent" class="px-3 py-2 {{ isActiveRoute(route, 'forum-recent') ? 'bg-gray-100 rounded-md font-medium' : 'hover:bg-gray-100 rounded-md' }}">Recent</a>
+        <a href="/forum?filter=solved" class="px-3 py-2 {{ isActiveRoute(route, 'forum-solved') ? 'bg-gray-100 rounded-md font-medium' : 'hover:bg-gray-100 rounded-md' }}">Solved</a>
       </nav>
     </header>
 

package/resources/components/Forum/ForumPagination.stx

@@ -11,7 +11,7 @@ const { currentPage = 1, totalPages = 1, pages = [] } = defineProps<ForumPaginat
     <nav class="flex gap-1 items-center">
       <a
         href="#"
-        class="flex items-center justify-center h-10 w-10 hover:bg-gray-100 border rounded-md cursor-not-allowed' : ? '' 'opacity-50 {{ }} == 1 currentPage"
+        class="w-10 h-10 flex items-center justify-center rounded-md border hover:bg-gray-100 {{ currentPage == 1 ? 'opacity-50 cursor-not-allowed' : '' }}"
         data-action="prev-page"
       >
         <span class="i-hugeicons-arrow-left"></span>
@@ -20,7 +20,7 @@ const { currentPage = 1, totalPages = 1, pages = [] } = defineProps<ForumPaginat
       @foreach(pages as page)
         <a
           href="#"
-          class="flex items-center justify-center h-10 w-10 text-white' hover:bg-gray-100' rounded-md : ? 'bg-primary 'border {{ }} == currentPage page"
+          class="w-10 h-10 flex items-center justify-center rounded-md {{ currentPage == page ? 'bg-primary text-white' : 'border hover:bg-gray-100' }}"
           data-action="go-to-page"
           data-page="{{ page }}"
         >
@@ -30,7 +30,7 @@ const { currentPage = 1, totalPages = 1, pages = [] } = defineProps<ForumPaginat
 
       <a
         href="#"
-        class="flex items-center justify-center h-10 w-10 hover:bg-gray-100 border rounded-md cursor-not-allowed' : ? '' 'opacity-50 {{ }} == currentPage totalPages"
+        class="w-10 h-10 flex items-center justify-center rounded-md border hover:bg-gray-100 {{ currentPage == totalPages ? 'opacity-50 cursor-not-allowed' : '' }}"
         data-action="next-page"
       >
         <span class="i-hugeicons-arrow-right"></span>

package/resources/components/Forum/ForumReplyForm.stx

@@ -64,7 +64,7 @@ function canSubmit(content) {
             Preview
           </button>
           <button
-            class="px-4 py-2 text-white bg-primary rounded-md hover:opacity-90 cursor-not-allowed' : ? '' 'opacity-50 {{ }} canSubmit(replyContent)"
+            class="px-4 py-2 bg-primary text-white rounded-md hover:opacity-90 {{ canSubmit(replyContent) ? '' : 'opacity-50 cursor-not-allowed' }}"
             data-action="submit-reply"
             {{ canSubmit(replyContent) ? '' : 'disabled' }}
           >

package/resources/components/Marketing/Feature.stx

@@ -14,13 +14,13 @@ name: '',
   icon: ''
 }
 </script>
-<div class="hover:opacity-100' : !isActive ? '' 'opacity-75 {{ {{ }} }} className">
-  <div class="w-9 rounded-lg : ? 'bg-blue-600' 'bg-slate-500' {{ }} isActive">
+<div class="{{ className }} {{ !isActive ? 'opacity-75 hover:opacity-100' : '' }}">
+  <div class="w-9 rounded-lg {{ isActive ? 'bg-blue-600' : 'bg-slate-500' }}">
     <svg aria-hidden="true" class="h-9 w-9" fill="none">
       <!-- feature.icon -->
     </svg>
   </div>
-  <h3 class="mt-6 font-medium text-sm : ? 'text-blue-600' 'text-slate-600' {{ }} isActive">
+  <h3 class="mt-6 text-sm font-medium {{ isActive ? 'text-blue-600' : 'text-slate-600' }}">
     {{ feature.name }}
   </h3>
   <p class="mt-2 font-display text-slate-900 text-xl">

package/resources/components/Marketing/Fields.stx

@@ -12,16 +12,16 @@ const { type = 'text', label = '', className = '', id = '', name = '', placehold
 
 const formClasses = 'block w-full appearance-none rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 sm:text-sm'
 </script>
-<div class="{{ }} className">
+<div class="{{ className }}">
   @if(label)
     <label for="{{ id }}" class="block mb-3 font-medium text-gray-700 text-sm">
       {{ label }}
     </label>
   @endif
   @if(type == 'text' || type == 'email' || type == 'password')
-    <input id="{{ id }}" type="{{ type }}" name="{{ name }}" placeholder="{{ placeholder }}" class="{{ }} formClasses">
+    <input id="{{ id }}" type="{{ type }}" name="{{ name }}" placeholder="{{ placeholder }}" class="{{ formClasses }}">
   @else
-    <select id="{{ id }}" name="{{ name }}" class="pr-8 {{ }} formClasses">
+    <select id="{{ id }}" name="{{ name }}" class="{{ formClasses }} pr-8">
       <slot />
     </select>
   @endif

package/resources/components/Marketing/Layout.stx

@@ -18,7 +18,7 @@ subsets: ['latin'],
 </script>
 <html
   lang="en"
-  class="h-full antialiased bg-white scroll-smooth {{ {{ }} }} inter.variable lexend.variable"
+  class="h-full scroll-smooth bg-white antialiased {{ inter.variable }} {{ lexend.variable }}"
 >
   <body class="flex flex-col h-full">
     <slot />

package/resources/components/Marketing/Plan.stx

@@ -11,12 +11,12 @@ interface PlanProps {
 const { name = '', price = '', description = '', href = '', features = [], featured = false } = defineProps<PlanProps>()
 </script>
 <section
-  class="flex lg:order-none' flex-col 'lg:py-8' px-6 py-8 sm:px-8 bg-blue-600 rounded-3xl : ? 'order-first {{ }} featured"
+  class="flex flex-col rounded-3xl px-6 sm:px-8 {{ featured ? 'order-first bg-blue-600 py-8 lg:order-none' : 'lg:py-8' }}"
 >
   <h3 class="mt-5 font-display text-lg text-white">
     {{ name }}
   </h3>
-  <p class="mt-2 text-base : ? 'text-slate-400' 'text-white' {{ }} featured">
+  <p class="mt-2 text-base {{ featured ? 'text-white' : 'text-slate-400' }}">
     {{ description }}
   </p>
   <p class="order-first font-display font-light text-5xl text-white tracking-tight">
@@ -24,18 +24,18 @@ const { name = '', price = '', description = '', href = '', features = [], featu
   </p>
   <ul
     role="list"
-    class="flex order-last flex-col gap-y-3 mt-10 text-sm : ? 'text-slate-200' 'text-white' {{ }} featured"
+    class="order-last mt-10 flex flex-col gap-y-3 text-sm {{ featured ? 'text-white' : 'text-slate-200' }}"
   >
     @foreach(features as feature)
       <li class="flex">
-        <span class="h-5 w-5 : ? 'text-slate-400' 'text-white' {{ }} featured i-hugeicons-checkmark-circle-02"></span>
+        <span class="i-hugeicons-checkmark-circle-02 h-5 w-5 {{ featured ? 'text-white' : 'text-slate-400' }}"></span>
         <span class="ml-4">{{ feature }}</span>
       </li>
     @endforeach
   </ul>
   <a
     href="{{ href }}"
-    class="inline-flex items-center justify-center mt-8 px-4 py-2 font-semibold text-slate-900 text-sm text-white active:text-slate-400 active:text-slate-600 active:bg-blue-200 hover:bg-blue-50 ring-slate-700 rounded-full active:ring-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white' focus-visible:outline-white' focus:outline-none hover:ring-slate-500 : ? 'bg-white 'ring-1 {{ }} featured"
+    class="mt-8 inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 {{ featured ? 'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white' : 'ring-1 ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white' }}"
     aria-label="Get started with the {{ name }} plan for {{ price }}"
   >
     Get started

package/resources/components/Marketing/Pricing.stx

@@ -84,12 +84,12 @@ const { plans = [ } = defineProps<PricingProps>()
     <div class="grid gap-y-10 grid-cols-1 lg:grid-cols-3 xl:gap-x-8 -mx-4 mt-16 sm:mx-auto lg:-mx-8 xl:mx-0 max-w-2xl lg:max-w-none">
       @foreach(plans as plan)
         <section
-          class="flex lg:order-none' flex-col 'lg:py-8' px-6 py-8 sm:px-8 bg-blue-600 rounded-3xl : ? 'order-first {{ }} plan.featured"
+          class="flex flex-col rounded-3xl px-6 sm:px-8 {{ plan.featured ? 'order-first bg-blue-600 py-8 lg:order-none' : 'lg:py-8' }}"
         >
           <h3 class="mt-5 font-display text-lg text-white">
             {{ plan.name }}
           </h3>
-          <p class="mt-2 text-base : ? 'text-slate-400' 'text-white' {{ }} plan.featured">
+          <p class="mt-2 text-base {{ plan.featured ? 'text-white' : 'text-slate-400' }}">
             {{ plan.description }}
           </p>
           <p class="order-first font-display font-light text-5xl text-white tracking-tight">
@@ -97,18 +97,18 @@ const { plans = [ } = defineProps<PricingProps>()
           </p>
           <ul
             role="list"
-            class="flex order-last flex-col gap-y-3 mt-10 text-sm : ? 'text-slate-200' 'text-white' {{ }} plan.featured"
+            class="order-last mt-10 flex flex-col gap-y-3 text-sm {{ plan.featured ? 'text-white' : 'text-slate-200' }}"
           >
             @foreach(plan.features as feature)
               <li class="flex">
-                <span class="h-5 w-5 : ? 'text-slate-400' 'text-white' {{ }} i-hugeicons-checkmark-circle-02 plan.featured"></span>
+                <span class="i-hugeicons-checkmark-circle-02 h-5 w-5 {{ plan.featured ? 'text-white' : 'text-slate-400' }}"></span>
                 <span class="ml-4">{{ feature }}</span>
               </li>
             @endforeach
           </ul>
           <a
             href="{{ plan.href }}"
-            class="inline-flex items-center justify-center mt-8 px-4 py-2 font-semibold text-slate-900 text-sm text-white hover:bg-blue-50' ring-slate-700 rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus:outline-none hover:ring-slate-500' : ? 'bg-white 'ring-1 {{ }} plan.featured"
+            class="mt-8 inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 {{ plan.featured ? 'bg-white text-slate-900 hover:bg-blue-50' : 'ring-1 ring-slate-700 text-white hover:ring-slate-500' }}"
             aria-label="Get started with the {{ plan.name }} plan for {{ plan.price }}"
           >
             Get started

package/resources/components/Marketing/PrimaryFeatures.stx

@@ -44,14 +44,14 @@ const { features = [, selectedIndex = 0 } = defineProps<PrimaryFeaturesProps>()
       <div class="flex overflow-x-auto sm:overflow-visible lg:col-span-5 -mx-4 mt-16 pb-4 sm:mx-0 sm:pb-0">
         <div class="flex lg:block relative z-10 gap-x-4 lg:gap-x-0 lg:gap-y-1 px-4 sm:mx-auto sm:px-0 lg:mx-0 whitespace-nowrap lg:whitespace-normal">
           @foreach(features as feature)
-            <div class="relative px-4 py-1 lg:p-6 'hover:bg-white/10 lg:bg-white/10 lg:hover:bg-white/5' rounded-full lg:ring-1 lg:ring-inset lg:ring-white/10' lg:rounded-l-xl lg:rounded-r-none selectedIndex : ? 'bg-white {{ }} == group loop.index">
+            <div class="group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6 {{ loop.index == selectedIndex ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10' : 'hover:bg-white/10 lg:hover:bg-white/5' }}">
               <h3>
-                <button class="font-display text-lg lg:text-white' lg:text-white' hover:text-white selectedIndex : ? 'text-blue-100 'text-blue-600 {{ }} == loop.index" data-action="select-tab" data-index="{{ loop.index }}">
+                <button class="font-display text-lg {{ loop.index == selectedIndex ? 'text-blue-600 lg:text-white' : 'text-blue-100 hover:text-white lg:text-white' }}" data-action="select-tab" data-index="{{ loop.index }}">
                   <span class="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none"></span>
                   {{ feature.title }}
                 </button>
               </h3>
-              <p class="hidden lg:block mt-2 text-sm group-hover:text-white' selectedIndex : ? 'text-blue-100 'text-white' {{ }} == loop.index">
+              <p class="mt-2 hidden text-sm lg:block {{ loop.index == selectedIndex ? 'text-white' : 'text-blue-100 group-hover:text-white' }}">
                 {{ feature.description }}
               </p>
             </div>
@@ -62,7 +62,7 @@ const { features = [, selectedIndex = 0 } = defineProps<PrimaryFeaturesProps>()
       <!-- Tab Panels -->
       <div class="lg:col-span-7">
         @foreach(features as feature)
-          <div class="selectedIndex : != ? '' 'hidden' {{ }} loop.index">
+          <div class="{{ loop.index != selectedIndex ? 'hidden' : '' }}">
             <div class="lg:hidden relative sm:px-6">
               <div class="absolute bottom-[-4.25rem] top-[-6.5rem] sm:inset-x-0 bg-white/10 ring-1 ring-inset ring-white/10 sm:rounded-t-xl -inset-x-4"></div>
               <p class="relative mx-auto max-w-2xl text-base text-white sm:text-center">

package/resources/components/Marketing/PrimaryFeatures2.stx

@@ -58,15 +58,15 @@ const { backgroundImage = '/images/screenshots/background-features.jpg', screens
       <div class="flex overflow-x-auto sm:overflow-visible lg:col-span-5 -mx-4 pb-4 sm:mx-0 sm:pb-0">
         <div class="flex lg:block relative z-10 gap-x-4 lg:gap-x-0 lg:gap-y-1 px-4 sm:mx-auto sm:px-0 lg:mx-0 whitespace-nowrap lg:whitespace-normal">
           @foreach(features as feature)
-            <div class="relative px-4 py-1 lg:p-6 'hover:bg-white/10 lg:bg-white/10 lg:hover:bg-white/5' rounded-full lg:ring-1 lg:ring-inset lg:ring-white/10' lg:rounded-l-xl lg:rounded-r-none selectedIndex : ? 'bg-white {{ }} == group loop.index">
+            <div class="group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6 {{ loop.index == selectedIndex ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10' : 'hover:bg-white/10 lg:hover:bg-white/5' }}">
               <h3>
-                <button class="font-display text-lg lg:text-white' lg:text-white' hover:text-white selectedIndex : ? 'text-blue-100 'text-blue-600 {{ }} == loop.index" data-action="select-tab" data-index="{{ loop.index }}">
+                <button class="font-display text-lg {{ loop.index == selectedIndex ? 'text-blue-600 lg:text-white' : 'text-blue-100 hover:text-white lg:text-white' }}" data-action="select-tab" data-index="{{ loop.index }}">
                   <span class="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none"></span>
                   {{ feature.title }}
                 </button>
               </h3>
               @if(tabOrientation == 'vertical')
-                <p class="hidden lg:block mt-2 text-sm group-hover:text-white' selectedIndex : ? 'text-blue-100 'text-white' {{ }} == loop.index">
+                <p class="mt-2 hidden text-sm lg:block {{ loop.index == selectedIndex ? 'text-white' : 'text-blue-100 group-hover:text-white' }}">
                   {{ feature.description }}
                 </p>
               @endif
@@ -77,7 +77,7 @@ const { backgroundImage = '/images/screenshots/background-features.jpg', screens
 
       <div class="lg:col-span-7">
         @foreach(features as feature)
-          <div class="selectedIndex : != ? '' 'hidden' {{ }} loop.index">
+          <div class="{{ loop.index != selectedIndex ? 'hidden' : '' }}">
             <div class="lg:hidden relative sm:px-6">
               <div class="absolute bottom-[-4.25rem] top-[-6.5rem] sm:inset-x-0 bg-white/10 ring-1 ring-inset ring-white/10 sm:rounded-t-xl -inset-x-4"></div>
               <p class="relative mx-auto max-w-2xl text-base text-white sm:text-center">

package/resources/components/Marketing/SecondaryFeatures.stx

@@ -45,12 +45,12 @@ const { features = [, selectedIndex = 0 } = defineProps<SecondaryFeaturesProps>(
       <div class="grid gap-x-8 grid-cols-3 pt-12">
         @foreach(features as feature)
           <div class="relative">
-            <div class="w-9 rounded-lg selectedIndex : ? 'bg-blue-600' 'bg-slate-500' {{ }} == loop.index">
+            <div class="w-9 rounded-lg {{ loop.index == selectedIndex ? 'bg-blue-600' : 'bg-slate-500' }}">
               <svg aria-hidden="true" class="h-9 w-9" fill="none">
                 {{ feature.icon }}
               </svg>
             </div>
-            <h3 class="mt-6 font-medium text-sm selectedIndex : ? 'text-blue-600' 'text-slate-600' {{ }} == loop.index">
+            <h3 class="mt-6 text-sm font-medium {{ loop.index == selectedIndex ? 'text-blue-600' : 'text-slate-600' }}">
               <button data-action="select-feature" data-index="{{ loop.index }}">{{ feature.name }}</button>
             </h3>
             <p class="mt-2 font-display text-slate-900 text-xl">
@@ -66,7 +66,7 @@ const { features = [, selectedIndex = 0 } = defineProps<SecondaryFeaturesProps>(
       <div class="overflow-hidden relative mt-20 px-14 py-16 xl:px-16 bg-slate-200 rounded-4xl">
         <div class="flex -mx-5">
           @foreach(features as feature)
-            <div class="px-5 duration-500 ease-in-out transition selectedIndex : != ? '' 'opacity-60' {{ }} loop.index" style="transform: translateX(-{{ selectedIndex * 100 }}%)">
+            <div class="px-5 transition duration-500 ease-in-out {{ loop.index != selectedIndex ? 'opacity-60' : '' }}" style="transform: translateX(-{{ selectedIndex * 100 }}%)">
               <div class="overflow-hidden w-[52.75rem] bg-white ring-1 ring-slate-500/10 rounded-xl shadow-lg shadow-slate-900/5">
                 <img class="w-full" src="{{ feature.image }}" alt="" sizes="52.75rem">
               </div>

package/views/[...all].stx

@@ -5,4 +5,3 @@ const { t } = useI18n()
 <div>
   {{ t('not-found') }}
 </div>
-

package/views/auth/signup.stx

@@ -1,3 +1,32 @@
+<script server>
+/**
+ * The providers whose buttons are worth rendering.
+ *
+ * `configuredSocialProviders()` knows each provider's own required config,
+ * so a provider missing credentials never reaches a visitor as a button
+ * that fails at the redirect. Adding credentials to `config/services.ts`
+ * is the whole of what turns one on.
+ *
+ * Icons come from hugeicons, the collection Stacks defaults to. Swap the
+ * map if your app standardises on another one.
+ */
+import { configuredSocialProviders } from '@stacksjs/socials'
+
+const PROVIDER_ICONS = {
+  apple: 'i-hugeicons-apple',
+  facebook: 'i-hugeicons-facebook-01',
+  github: 'i-hugeicons-github',
+  google: 'i-hugeicons-google',
+  twitter: 'i-hugeicons-new-twitter',
+}
+
+const socialSignIn = configuredSocialProviders().map(provider => ({
+  label: provider.label,
+  href: `/auth/${provider.name}/redirect`,
+  icon: PROVIDER_ICONS[provider.name] ?? 'i-hugeicons-user-circle',
+}))
+</script>
+
 <div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8 min-h-full">
   <div class="sm:mx-auto sm:max-w-md sm:w-full">
     <Logo class="mx-auto h-11 w-auto" />
@@ -46,40 +75,46 @@
         </div>
       </form>
 
-      <div>
-        <div class="relative mt-10">
-          <div class="flex absolute inset-0 items-center" aria-hidden="true">
-            <div class="w-full border-gray-200 border-t"></div>
-          </div>
-          <div class="flex relative justify-center font-medium leading-6 text-sm">
-            <span class="px-6 text-gray-900 bg-white">Or continue with</span>
-          </div>
-        </div>
+      {{--
+        Social sign-in, driven by which providers are actually configured.
 
-        <div class="grid gap-4 grid-cols-2 mt-6">
-          <a href="#" class="flex gap-3 items-center justify-center px-3 py-2 w-full font-semibold text-gray-900 text-sm bg-white hover:bg-gray-50 ring-1 ring-gray-300 ring-inset rounded-md focus-visible:ring-transparent shadow-sm">
-            <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36002 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86002 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
-              <path d="M23.49 12.275C23.49 11.49 23.415 10.73 23.3 10H12V14.51H18.47C18.18 15.99 17.34 17.25 16.08 18.1L19.945 21.1C22.2 19.01 23.49 15.92 23.49 12.275Z" fill="#4285F4" />
-              <path d="M5.26498 14.2949C5.02498 13.5699 4.88501 12.7999 4.88501 11.9999C4.88501 11.1999 5.01998 10.4299 5.26498 9.7049L1.275 6.60986C0.46 8.22986 0 10.0599 0 11.9999C0 13.9399 0.46 15.7699 1.28 17.3899L5.26498 14.2949Z" fill="#FBBC05" />
-              <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.2654 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
-            </svg>
-            <span class="font-semibold leading-6 text-sm">Google</span>
-          </a>
+        This block used to be two hardcoded buttons pointing at `href="#"`,
+        so a scaffolded app shipped a Google and a GitHub button that both
+        did nothing, and offered them whether or not either provider had
+        credentials. `configuredSocialProviders()` answers that per
+        provider on each provider's own terms (Apple has no clientSecret
+        and is validated on its signing key instead), so what renders here
+        is exactly the set that will complete a sign-in.
+      --}}
+      @if (socialSignIn.length)
+        <div>
+          <div class="relative mt-10">
+            <div class="flex absolute inset-0 items-center" aria-hidden="true">
+              <div class="w-full border-gray-200 border-t"></div>
+            </div>
+            <div class="flex relative justify-center font-medium leading-6 text-sm">
+              <span class="px-6 text-gray-900 bg-white">Or continue with</span>
+            </div>
+          </div>
 
-          <a href="#" class="flex gap-3 items-center justify-center px-3 py-2 w-full font-semibold text-gray-900 text-sm bg-white hover:bg-gray-50 ring-1 ring-gray-300 ring-inset rounded-md focus-visible:ring-transparent shadow-sm">
-            <svg class="h-5 w-5 fill-[#24292F]" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-              <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
-            </svg>
-            <span class="font-semibold leading-6 text-sm">GitHub</span>
-          </a>
+          <div class="grid gap-4 mt-6 {{ socialSignIn.length > 1 ? 'grid-cols-2' : 'grid-cols-1' }}">
+            @foreach (socialSignIn as provider)
+              <a
+                href="{{ provider.href }}"
+                class="flex gap-3 items-center justify-center px-3 py-2 w-full font-semibold text-gray-900 text-sm bg-white hover:bg-gray-50 ring-1 ring-gray-300 ring-inset rounded-md focus-visible:ring-transparent shadow-sm"
+              >
+                <i class="h-5 w-5 {{ provider.icon }}" aria-hidden="true"></i>
+                <span class="font-semibold leading-6 text-sm">{{ provider.label }}</span>
+              </a>
+            @endforeach
+          </div>
         </div>
-      </div>
+      @endif
     </div>
 
     <p class="mt-10 text-center text-gray-500 text-sm">
       Already have an account?
-      <a href="#" class="font-semibold leading-6 text-blue-600 hover:text-blue-500">Sign in</a>
+      <a href="/login" class="font-semibold leading-6 text-blue-600 hover:text-blue-500">Sign in</a>
     </p>
   </div>
 </div>

package/views/dashboard/layouts/default.stx

@@ -209,7 +209,7 @@ html[data-appearance="arc"] body {
 
 html[data-appearance="arc"] [data-stx-content] {
   /* Only three margins. `margin-left` is deliberately left to the base rule.
-     
+
      It is the one margin that transitions (0.3s, for the sidebar collapse),
      and overriding a transitioned longhand with a `calc()` over two custom
      properties wedges the interpolation in WebKit: switching appearance leaves
@@ -217,7 +217,7 @@ html[data-appearance="arc"] [data-stx-content] {
      means the property never changes when the appearance does, so there is
      nothing to wedge — and the collapse animation keeps working identically in
      both styles.
-     
+
      The panel strip down the card's left side is the sidebar's own trailing
      padding, which is where it comes from in Arc too. */
   margin-top: var(--dash-arc-gap);