@stacksjs/defaults 0.75.127 → 0.75.129

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

@@ -106,6 +106,46 @@ minimumIntervalMinutes? }`and`associatedDomains` (universal links). Leave
 `buddy build:ios` warns. The Liquid Glass chrome needs iOS 26 at run time;
 the default `deploymentTarget` stays, older systems drawing classic bars.
 
+## Native screen bindings
+
+Screens under `resources/native/` use the same STX client syntax as web views.
+Declare reactive data in `<script client>` and bind text with `:text`, props
+with `:prop`, and native presses with `@click`. Pull-to-refresh uses `@refresh`
+and a boolean `:refreshing` signal. Bare signals auto-unwrap in bindings;
+read them with `signal()` and update them with `signal.set()` inside scripts.
+Imported helpers used only in bindings are retained in the client setup.
+
+```stx
+<script client>
+const title = state('Today')
+const refreshing = state(false)
+async function refresh() {
+  refreshing.set(true)
+  try {
+    const response = await fetch('https://example.com/api/title')
+    if (!response.ok) throw new Error('Could not refresh')
+    title.set((await response.json()).title)
+  }
+  finally {
+    refreshing.set(false)
+  }
+}
+</script>
+<ScrollView @refresh="refresh()" :refreshing="refreshing">
+  <Text :text="title" />
+</ScrollView>
+```
+
+A single-brace JSX expression such as `{title}` is plain text in STX. Keep
+startup requests and timers in `onMount()`, returning a cleanup for timers so
+leaving a native screen releases them. Test the minified `compileNativeBundle`
+output with the native bridge, including refresh, keyed rows, conditions and
+navigation; compiling a plausible tree alone does not prove it updates.
+
+While an app is in TestFlight before its first public release, keep the iOS
+marketing version at `1.0.0` and run `buddy release:ios --bump build`. Each
+upload needs a new build number, not a patch to the marketing version.
+
 ## Device search index
 
 `spotlight` says what of the application's own content a device may index, so

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.127",
+  "version": "0.75.129",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.127",
+  "version": "0.75.129",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.127",
+    "@stacksjs/mobile": "0.75.129",
     "@stacksjs/sanitizer": "^0.2.422",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/CookieConsent.stx

@@ -72,12 +72,12 @@ function saveChoices() {
     <div
       role="region"
       aria-label="Cookie consent"
-      class="fixed bottom-0 inset-x-0 z-50 p-4 sm:p-6"
+      class="bottom-0 fixed inset-x-0 z-50 p-4 sm:p-6"
     >
-      <div class="mx-auto max-w-3xl rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-neutral-700 dark:bg-neutral-900 sm:p-6">
-        <h2 class="text-base font-semibold text-gray-900 dark:text-white">{{ title }}</h2>
+      <div class="mx-auto p-4 sm:p-6 max-w-3xl bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-700 shadow-lg">
+        <h2 class="font-semibold text-base text-gray-900 dark:text-white">{{ title }}</h2>
 
-        <p class="mt-2 text-sm text-gray-600 dark:text-neutral-300">
+        <p class="mt-2 text-gray-600 text-sm dark:text-neutral-300">
           {{ message }}
           <a :href="policyUrl" class="underline hover:no-underline">Read our policy</a>.
         </p>
@@ -86,7 +86,7 @@ function saveChoices() {
           <fieldset class="mt-4 space-y-3">
             <legend class="sr-only">Cookie categories</legend>
 
-            <label class="flex items-start gap-3 text-sm">
+            <label class="flex gap-3 items-start text-sm">
               <input type="checkbox" checked disabled class="mt-0.5" />
               <span>
                 <span class="font-medium text-gray-900 dark:text-white">Necessary</span>
@@ -94,7 +94,7 @@ function saveChoices() {
               </span>
             </label>
 
-            <label class="flex items-start gap-3 text-sm">
+            <label class="flex gap-3 items-start text-sm">
               <input type="checkbox" :checked="preferences()" @change="preferences.set(!preferences())" class="mt-0.5" />
               <span>
                 <span class="font-medium text-gray-900 dark:text-white">Preferences</span>
@@ -102,7 +102,7 @@ function saveChoices() {
               </span>
             </label>
 
-            <label class="flex items-start gap-3 text-sm">
+            <label class="flex gap-3 items-start text-sm">
               <input type="checkbox" :checked="analytics()" @change="analytics.set(!analytics())" class="mt-0.5" />
               <span>
                 <span class="font-medium text-gray-900 dark:text-white">Analytics</span>
@@ -110,7 +110,7 @@ function saveChoices() {
               </span>
             </label>
 
-            <label class="flex items-start gap-3 text-sm">
+            <label class="flex gap-3 items-start text-sm">
               <input type="checkbox" :checked="marketing()" @change="marketing.set(!marketing())" class="mt-0.5" />
               <span>
                 <span class="font-medium text-gray-900 dark:text-white">Marketing</span>
@@ -121,22 +121,22 @@ function saveChoices() {
         @endif
 
         {{-- Decline is a peer of Accept, not a lesser link. --}}
-        <div class="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-end">
+        <div class="flex flex-col gap-2 sm:flex-row sm:justify-end mt-4">
           @if(showChoices())
-            <button type="button" @click="saveChoices()" class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700 dark:bg-white dark:text-gray-900 dark:hover:bg-neutral-200">
+            <button type="button" @click="saveChoices()" class="px-4 py-2 font-medium text-sm text-white dark:text-gray-900 bg-gray-900 dark:bg-white hover:bg-gray-700 dark:hover:bg-neutral-200 rounded-md">
               Save choices
             </button>
           @else
-            <button type="button" @click="showChoices.set(true)" class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 dark:border-neutral-600 dark:text-white dark:hover:bg-neutral-800">
+            <button type="button" @click="showChoices.set(true)" class="px-4 py-2 font-medium text-gray-900 text-sm dark:text-white hover:bg-gray-50 dark:hover:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600">
               Choose
             </button>
           @endif
 
-          <button type="button" @click="declineAll()" class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 dark:border-neutral-600 dark:text-white dark:hover:bg-neutral-800">
+          <button type="button" @click="declineAll()" class="px-4 py-2 font-medium text-gray-900 text-sm dark:text-white hover:bg-gray-50 dark:hover:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600">
             Decline
           </button>
 
-          <button type="button" @click="acceptAll()" class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 dark:border-neutral-600 dark:text-white dark:hover:bg-neutral-800">
+          <button type="button" @click="acceptAll()" class="px-4 py-2 font-medium text-gray-900 text-sm dark:text-white hover:bg-gray-50 dark:hover:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600">
             Accept all
           </button>
         </div>

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

@@ -220,7 +220,7 @@
         <path :d="sparklinePath()" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
       </svg>
     </div>
-    <div :if="loadingHistory() && !hasHistory()" role="status" class="flex gap-2 items-center mb-5 text-zinc-500 text-xs dark:text-zinc-400">
+    <div :if="loadingHistory() && !hasHistory()" role="status" class="flex gap-2 items-center mb-5 text-xs text-zinc-500 dark:text-zinc-400">
       <span aria-hidden="true" class="h-3.5 w-3.5 animate-spin i-hugeicons-loading-03"></span>
       <span>Loading runner history</span>
     </div>

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

@@ -75,7 +75,7 @@ function failedJobs(runId: number) {
 
   <div :if="loading() && runs().length === 0" class="px-5 py-12 text-center">
     <span aria-hidden="true" class="mx-auto h-6 w-6 text-violet-500 animate-spin i-hugeicons-loading-03"></span>
-    <p class="mt-2 text-zinc-500 text-xs">Fetching recent runs...</p>
+    <p class="mt-2 text-xs text-zinc-500">Fetching recent runs...</p>
   </div>
 
   <ul :if="runs().length > 0" class="px-5 py-3">
@@ -87,7 +87,7 @@ function failedJobs(runId: number) {
               <span :class="`px-1.5 py-0.5 text-[10px] font-medium rounded ${runStatusBadge(run.conclusion, run.status).cls}`" :text="runStatusBadge(run.conclusion, run.status).label"></span>
               <span class="font-medium text-sm text-zinc-800 truncate dark:text-zinc-200" :text="run.name"></span>
             </div>
-            <p :if="run.commitMessage" class="mt-1 text-zinc-500 text-xs truncate" :text="truncate(run.commitMessage, 80)"></p>
+            <p :if="run.commitMessage" class="mt-1 text-xs text-zinc-500 truncate" :text="truncate(run.commitMessage, 80)"></p>
             <div class="flex gap-2 items-center mt-1 text-[10px] text-zinc-400">
               <span class="font-mono" :text="run.headShaShort"></span>
               <span :if="run.headBranch" :text="run.headBranch"></span>
@@ -104,8 +104,8 @@ function failedJobs(runId: number) {
       </div>
 
       <div :if="expandedRunId() === run.id" class="px-3 py-2 bg-zinc-50 dark:bg-zinc-900/50 border-t border-zinc-100 dark:border-zinc-900">
-        <div :if="loadingJobsRunId() === run.id" class="py-2 text-zinc-500 text-xs">Loading jobs...</div>
-        <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length === 0" class="py-1 italic text-zinc-400 text-xs">No job detail.</div>
+        <div :if="loadingJobsRunId() === run.id" class="py-2 text-xs text-zinc-500">Loading jobs...</div>
+        <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length === 0" class="py-1 italic text-xs text-zinc-400">No job detail.</div>
         <div :if="loadingJobsRunId() !== run.id && failedJobs(run.id).length > 0" class="space-y-1.5">
           <p class="text-[10px] text-zinc-500 tracking-wide uppercase">Failed jobs</p>
           <a :for="job in failedJobs(run.id)" :href="job.url" target="_blank" rel="noreferrer" @click.stop class="flex gap-1.5 items-center no-underline text-red-700 text-xs dark:text-red-400 hover:underline">
@@ -114,7 +114,7 @@ function failedJobs(runId: number) {
             <span :if="job.durationMs" class="text-zinc-400" :text="'(' + formatDuration(job.durationMs) + ')'"></span>
           </a>
         </div>
-        <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length > 0 && failedJobs(run.id).length === 0" class="py-1 text-zinc-500 text-xs">
+        <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length > 0 && failedJobs(run.id).length === 0" class="py-1 text-xs text-zinc-500">
           All <span :text="jobsForRun(run.id).length"></span> jobs passed.
         </div>
       </div>
@@ -122,6 +122,6 @@ function failedJobs(runId: number) {
   </ul>
 
   <div :if="!loading() && !error() && runs().length === 0" class="px-5 py-12 text-center">
-    <p class="text-zinc-500 text-sm">No recent runs.</p>
+    <p class="text-sm text-zinc-500">No recent runs.</p>
   </div>
 </Drawer>

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

@@ -9,8 +9,8 @@ defineClientPayload({ blogUrl })
 </script>
 
 <template>
-<div class="p-6 min-h-screen max-w-full text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
-  <div class="flex flex-col gap-6 mx-auto min-w-0 max-w-7xl w-full">
+<div class="p-6 max-w-full min-h-screen text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
+  <div class="flex flex-col gap-6 mx-auto max-w-7xl min-w-0 w-full">
 
     <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between pb-5 border-b border-neutral-200 dark:border-neutral-800">
       <div>
@@ -50,7 +50,7 @@ defineClientPayload({ blogUrl })
       </div>
     </section>
 
-    <section class="overflow-hidden min-w-0 max-w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+    <section class="overflow-hidden max-w-full min-w-0 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
       <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between p-4 border-b border-neutral-200 dark:border-neutral-800">
         <div class="relative flex-1 max-w-md">
           <span class="absolute left-3 top-1/2 h-4 w-4 text-neutral-500 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>

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

@@ -160,14 +160,14 @@ function submit(): void {
       </label>
 
       <label class="flex flex-col gap-2 sm:col-span-2">
-        <span class="flex items-center justify-between gap-3">
+        <span class="flex gap-3 items-center justify-between">
           <span class="font-medium text-sm">Content</span>
           <span :if="bodyLoading()" role="status" class="inline-flex gap-1.5 items-center text-neutral-500 text-xs dark:text-neutral-400">
             <span class="h-3.5 w-3.5 animate-spin i-hugeicons-loading-03"></span>
             Loading content
           </span>
         </span>
-        <textarea x-model="body" name="body" rows="14" :disabled="bodyLoading() || bodyLoadFailed()" class="px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md disabled:opacity-60 dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 resize-y"></textarea>
+        <textarea x-model="body" name="body" rows="14" :disabled="bodyLoading() || bodyLoadFailed()" class="px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 disabled:opacity-60 resize-y"></textarea>
         <span class="text-neutral-500 text-xs dark:text-neutral-400">Markdown. {{ wordCount() }} words, about {{ readingTime() }} min read.</span>
       </label>
     </div>

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

@@ -162,7 +162,7 @@ onMount(() => {
 })
 </script>
 
-<div class="min-w-0 max-w-full space-y-6">
+<div class="space-y-6 max-w-full min-w-0">
   <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
     <div>
       <p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p>
@@ -183,7 +183,7 @@ onMount(() => {
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Newest</p><p class="mt-2 font-semibold text-gray-900 text-lg truncate dark:text-white">{{ records()[0]?.name || 'None' }}</p></article>
   </section>
 
-  <section class="overflow-hidden min-w-0 max-w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <section class="overflow-hidden max-w-full min-w-0 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
     <div class="p-4 border-b border-gray-200 dark:border-neutral-700"><label><span class="sr-only">Search {{ resource() }}</span><input x-model="search" type="search" :placeholder="'Search ' + resource()" class="px-3 py-2 max-w-md w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label></div>
     <div class="overflow-x-auto max-w-full w-full">
       <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">

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

@@ -29,8 +29,8 @@ function submit(): void {
 <Modal :isOpen="open()" title="Create folder" :description="'Add a folder inside ' + location() + '.'" size="sm" :closable="!busy()" @close="close">
   <form id="create-folder-form" @submit.prevent="submit">
     <label class="block">
-      <span class="font-medium text-stone-700 text-sm dark:text-neutral-200">Folder name</span>
-      <input x-model.trim="folderName" name="name" required maxlength="255" autocomplete="off" class="mt-1 px-3 py-2 w-full text-stone-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-stone-300 rounded-lg dark:border-neutral-700" />
+      <span class="font-medium text-sm text-stone-700 dark:text-neutral-200">Folder name</span>
+      <input x-model.trim="folderName" name="name" required maxlength="255" autocomplete="off" class="mt-1 px-3 py-2 w-full text-sm text-stone-900 dark:text-white bg-white dark:bg-neutral-900 border border-stone-300 rounded-lg dark:border-neutral-700" />
     </label>
   </form>
 

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

@@ -67,7 +67,7 @@ function submit(): void {
   <form id="file-upload-form" @submit.prevent="submit">
     <label class="flex flex-col items-center justify-center p-8 text-center border-2 border-dashed border-stone-300 rounded-xl dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-600 cursor-pointer" @dragover.prevent @drop.prevent="handleDrop($event)">
       <span class="h-10 w-10 text-stone-400 i-hugeicons-upload-01"></span>
-      <span class="mt-3 font-semibold text-stone-800 text-sm dark:text-white">Choose files or drop them here</span>
+      <span class="mt-3 font-semibold text-sm text-stone-800 dark:text-white">Choose files or drop them here</span>
       <span class="mt-1 text-stone-500 text-xs dark:text-neutral-400">{{ selectedFilesLabel() }}</span>
       <input ref="dashboardFileUploadInput" name="files" type="file" class="sr-only" multiple @change="handleFileSelection($event)" />
     </label>

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

@@ -327,7 +327,7 @@ onMount(() => {
               <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>
+          <pre class="overflow-auto mt-4 p-3 max-h-40 font-mono text-neutral-600 text-xs whitespace-pre-wrap 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>

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

@@ -30,8 +30,8 @@ function icon(operation: DeploymentPreviewOperation): string {
   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 :if="plan()" class="overflow-y-auto max-h-[65vh]">
+    <div class="grid gap-px grid-cols-2 md:grid-cols-4 bg-neutral-200 dark:bg-neutral-700 border-b border-neutral-200 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>
@@ -76,10 +76,10 @@ function icon(operation: DeploymentPreviewOperation): string {
         </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">
+            <div class="flex items-center justify-center shrink-0 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-1 min-w-0">
               <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>
@@ -97,7 +97,7 @@ function icon(operation: DeploymentPreviewOperation): string {
           <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>
+              <span class="px-2 py-1 font-mono text-[11px] text-neutral-600 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>

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

@@ -106,8 +106,8 @@ onMount(() => {
         <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
           Outbound messages recorded by the local log driver. Active mailer: {{ activeDriver() || 'log' }}.
         </p>
-        <div :if="unreadable().length > 0" class="mt-2 flex gap-2 items-start px-3 py-2 bg-amber-50 border border-amber-200 rounded-md text-amber-800 text-xs dark:bg-amber-900/20 dark:border-amber-800/40 dark:text-amber-200">
-          <span class="mt-0.5 h-3.5 w-3.5 shrink-0 i-hugeicons-alert-02"></span>
+        <div :if="unreadable().length > 0" class="flex gap-2 items-start mt-2 px-3 py-2 text-amber-800 text-xs dark:text-amber-200 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 rounded-md dark:border-amber-800/40">
+          <span class="shrink-0 mt-0.5 h-3.5 w-3.5 i-hugeicons-alert-02"></span>
           <div>
             <p class="font-medium">
               {{ unreadable().length }} capture{{ unreadable().length === 1 ? '' : 's' }} could not be read and {{ unreadable().length === 1 ? 'was' : 'were' }} left out of this list.

package/resources/components/Dashboard/Feedback/FeedbackForm.stx

@@ -176,7 +176,7 @@ function another() {
         <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-red-100 dark:bg-red-900/30 rounded-full">
           <span class="h-6 w-6 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></span>
         </div>
-        <h1 class="mb-2 font-semibold text-xl text-neutral-900 tracking-tight dark:text-white">This feedback link is not valid</h1>
+        <h1 class="mb-2 font-semibold text-neutral-900 text-xl tracking-tight dark:text-white">This feedback link is not valid</h1>
         <p class="text-[15px] text-neutral-500 dark:text-neutral-400">
           It may have been turned off, or it may have expired. Ask whoever sent it for a fresh one.
         </p>
@@ -186,9 +186,9 @@ function another() {
         <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-green-100 dark:bg-green-900/30 rounded-full">
           <span class="h-6 w-6 text-green-600 dark:text-green-400 i-hugeicons-checkmark-circle-02"></span>
         </div>
-        <h1 class="mb-2 font-semibold text-xl text-neutral-900 tracking-tight dark:text-white">Thank you</h1>
+        <h1 class="mb-2 font-semibold text-neutral-900 text-xl tracking-tight dark:text-white">Thank you</h1>
         <p class="mb-6 text-[15px] text-neutral-500 dark:text-neutral-400">Your feedback is on the board.</p>
-        <button type="button" @click="another" class="px-5 py-2.5 font-medium text-sm text-white bg-neutral-900 rounded-lg transition-transform dark:bg-white dark:text-neutral-900 active:scale-[0.98]">
+        <button type="button" @click="another" class="px-5 py-2.5 font-medium text-sm text-white dark:text-neutral-900 bg-neutral-900 dark:bg-white rounded-lg transition-transform active:scale-[0.98]">
           Send another
         </button>
       </div>
@@ -203,7 +203,7 @@ function another() {
 
         <form @submit.prevent="submit" @paste="paste($event)" class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-sm">
           <div :if="error()" role="alert" class="flex gap-2 items-center mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
-            <span class="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></span>
+            <span class="flex-shrink-0 h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></span>
             <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
           </div>
 
@@ -216,7 +216,7 @@ function another() {
               :disabled="status() === 'sending'"
               required
               placeholder="A short summary"
-              class="block px-3 py-2.5 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg transition-colors dark:border-neutral-600 placeholder:text-neutral-400 hover:border-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+              class="block px-3 py-2.5 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 hover:border-neutral-400 transition-colors"
             />
           </label>
 
@@ -228,7 +228,7 @@ function another() {
               :maxlength="maxDescription()"
               :disabled="status() === 'sending'"
               placeholder="Where you were, what you expected, and what you got instead"
-              class="block px-3 py-2.5 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg resize-y transition-colors dark:border-neutral-600 placeholder:text-neutral-400 hover:border-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+              class="block px-3 py-2.5 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 hover:border-neutral-400 transition-colors resize-y"
             ></textarea>
           </label>
 
@@ -236,14 +236,14 @@ function another() {
             <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Screenshot <span class="font-normal text-neutral-400">(optional)</span></span>
 
             <div :if="screenshot()" class="flex gap-3 items-center p-3 bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 rounded-lg dark:border-neutral-700">
-              <img :src="preview()" alt="The screenshot you chose" class="h-14 w-14 bg-white dark:bg-neutral-900 border border-neutral-200 rounded object-cover dark:border-neutral-700" />
+              <img :src="preview()" alt="The screenshot you chose" class="object-cover h-14 w-14 bg-white dark:bg-neutral-900 border border-neutral-200 rounded dark:border-neutral-700" />
               <span class="flex-1 min-w-0 text-neutral-600 text-sm truncate dark:text-neutral-300">{{ screenshot()?.name || 'Pasted image' }}</span>
-              <button type="button" @click="clear" class="flex-shrink-0 px-2.5 py-1.5 font-medium text-neutral-600 text-xs dark:text-neutral-300 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-700">
+              <button type="button" @click="clear" class="flex-shrink-0 px-2.5 py-1.5 font-medium text-neutral-600 text-xs dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-md">
                 Remove
               </button>
             </div>
 
-            <label :else class="flex flex-col items-center justify-center px-4 py-6 text-center border border-neutral-300 border-dashed rounded-lg cursor-pointer transition-colors dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-600" @dragover.prevent @drop.prevent="drop($event)">
+            <label :else class="flex flex-col items-center justify-center px-4 py-6 text-center border border-dashed border-neutral-300 rounded-lg dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-600 transition-colors cursor-pointer" @dragover.prevent @drop.prevent="drop($event)">
               <span class="h-6 w-6 text-neutral-400 i-hugeicons-image-upload"></span>
               <span class="mt-2 font-medium text-neutral-700 text-sm dark:text-neutral-200">Choose an image, drop it here, or paste it</span>
               <span class="mt-1 text-neutral-400 text-xs">PNG, JPEG, WebP or GIF, up to {{ megabytes(sizeLimit()) }}</span>
@@ -262,7 +262,7 @@ function another() {
           <button
             type="submit"
             :disabled="!canSubmit()"
-            class="flex gap-2 items-center justify-center px-5 py-2.5 w-full font-medium text-sm text-white bg-neutral-900 rounded-lg transition-transform dark:bg-white dark:text-neutral-900 disabled:cursor-not-allowed disabled:opacity-50 active:scale-[0.99]"
+            class="flex gap-2 items-center justify-center px-5 py-2.5 w-full font-medium text-sm text-white dark:text-neutral-900 bg-neutral-900 dark:bg-white rounded-lg disabled:opacity-50 transition-transform active:scale-[0.99] disabled:cursor-not-allowed"
           >
             <span :if="status() === 'sending'" class="h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
             <span>{{ status() === 'sending' ? 'Sending' : 'Send feedback' }}</span>

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

@@ -245,7 +245,7 @@ function formatTimestamp(iso: string | null | undefined): string {
 >
   <div :if="openCard()" class="grid gap-6">
     <label class="grid gap-2">
-      <span class="font-medium text-zinc-500 text-xs tracking-wide uppercase">Title</span>
+      <span class="font-medium text-xs text-zinc-500 tracking-wide uppercase">Title</span>
       <input
         x-model="titleDraft"
         name="card_title"
@@ -257,7 +257,7 @@ function formatTimestamp(iso: string | null | undefined): string {
       />
     </label>
 
-    <div :if="loadingCard()" role="status" class="flex gap-2 items-center text-zinc-500 text-sm">
+    <div :if="loadingCard()" role="status" class="flex gap-2 items-center text-sm text-zinc-500">
       <span class="h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
       Refreshing card details
     </div>
@@ -269,24 +269,24 @@ function formatTimestamp(iso: string | null | undefined): string {
     <div class="grid gap-6 grid-cols-1 md:grid-cols-3">
       <div class="md:col-span-2 space-y-6">
         <section>
-          <h4 class="mb-2 font-medium text-zinc-500 text-xs tracking-wide uppercase">Description</h4>
+          <h4 class="mb-2 font-medium text-xs text-zinc-500 tracking-wide uppercase">Description</h4>
           <textarea
             x-model="descDraft"
             name="card_description"
             @blur="commitDescription()"
             rows="4"
             placeholder="Add a more detailed description"
-            class="px-3 py-2 w-full text-zinc-800 text-sm dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-y"
+            class="px-3 py-2 w-full text-sm text-zinc-800 dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-y"
           ></textarea>
         </section>
 
         <section :if="cardAttachments().length">
-          <h4 class="mb-2 font-medium text-zinc-500 text-xs tracking-wide uppercase">Attachments</h4>
+          <h4 class="mb-2 font-medium text-xs text-zinc-500 tracking-wide uppercase">Attachments</h4>
           <ul class="grid gap-3 grid-cols-2 sm:grid-cols-3">
             <li :for="attachment in cardAttachments" class="overflow-hidden bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800">
               <!-- The URL is signed and expires, so it is opened in a new tab rather than linked anywhere that outlives the modal. -->
               <a :if="attachment.url" :href="attachment.url" target="_blank" rel="noopener noreferrer" class="block">
-                <img :src="attachment.url" :alt="'Attachment ' + attachment.id" loading="lazy" class="h-28 w-full bg-zinc-50 dark:bg-zinc-900 object-cover" />
+                <img :src="attachment.url" :alt="'Attachment ' + attachment.id" loading="lazy" class="object-cover h-28 w-full bg-zinc-50 dark:bg-zinc-900" />
               </a>
               <!-- Listed even without a URL: a screenshot nobody can open is worth chasing, and is not the same as no screenshot. -->
               <div :else class="flex items-center justify-center h-28 bg-zinc-50 dark:bg-zinc-900">
@@ -301,7 +301,7 @@ function formatTimestamp(iso: string | null | undefined): string {
         </section>
 
         <section>
-          <h4 class="mb-2 font-medium text-zinc-500 text-xs tracking-wide uppercase">Activity</h4>
+          <h4 class="mb-2 font-medium text-xs text-zinc-500 tracking-wide uppercase">Activity</h4>
           <div class="mb-4">
             <textarea
               x-model="commentDraft"
@@ -310,27 +310,27 @@ function formatTimestamp(iso: string | null | undefined): string {
               @keydown.ctrl.enter.prevent="submitComment()"
               rows="2"
               placeholder="Add a comment, then press Command+Enter to send"
-              class="px-3 py-2 w-full text-zinc-800 text-sm dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-none"
+              class="px-3 py-2 w-full text-sm text-zinc-800 dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-none"
             ></textarea>
             <div class="flex justify-end mt-2">
               <Button size="sm" :disabled="!commentDraft().trim()" @click="submitComment()">Comment</Button>
             </div>
           </div>
 
-          <div :if="cardComments().length === 0 && !loadingCard()" class="italic text-zinc-400 text-xs">No comments yet.</div>
+          <div :if="cardComments().length === 0 && !loadingCard()" class="italic text-xs text-zinc-400">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>
               <div class="flex-1 min-w-0">
                 <div class="flex flex-wrap gap-2 items-baseline">
-                  <span class="font-medium text-zinc-700 text-xs dark:text-zinc-200" :text="comment.authorName || comment.authorEmail || 'Unknown'"></span>
+                  <span class="font-medium text-xs text-zinc-700 dark:text-zinc-200" :text="comment.authorName || comment.authorEmail || 'Unknown'"></span>
                   <span class="text-[10px] text-zinc-400" :text="formatTimestamp(comment.createdAt)"></span>
                   <template :if="editingCommentId() !== comment.id">
                     <Button variant="ghost" size="xs" @click="startCommentEdit(comment.id, comment.body)">Edit</Button>
                     <Button variant="ghost" size="xs" @click="requestDelete('comment', comment.id)"><span class="text-red-500">Delete</span></Button>
                   </template>
                 </div>
-                <p :if="editingCommentId() !== comment.id" class="mt-0.5 text-zinc-700 text-xs whitespace-pre-wrap dark:text-zinc-300" :text="comment.body"></p>
+                <p :if="editingCommentId() !== comment.id" class="mt-0.5 text-xs text-zinc-700 whitespace-pre-wrap dark:text-zinc-300" :text="comment.body"></p>
                 <div :if="editingCommentId() === comment.id" class="mt-2">
                   <textarea
                     x-model="commentEditDraft"
@@ -340,7 +340,7 @@ function formatTimestamp(iso: string | null | undefined): string {
                     rows="3"
                     maxlength="10000"
                     :aria-label="'Edit comment by ' + (comment.authorName || comment.authorEmail || 'Unknown')"
-                    class="px-3 py-2 w-full text-zinc-800 text-sm dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-y"
+                    class="px-3 py-2 w-full text-sm text-zinc-800 dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-y"
                   ></textarea>
                   <div class="flex gap-2 justify-end mt-2">
                     <Button variant="secondary" size="xs" :disabled="savingCommentId() === comment.id" @click="cancelCommentEdit()">Cancel</Button>
@@ -356,7 +356,7 @@ function formatTimestamp(iso: string | null | undefined): string {
       <aside class="space-y-5">
         <section>
           <div class="flex items-center justify-between mb-2">
-            <h4 class="font-medium text-zinc-500 text-xs tracking-wide uppercase">Labels</h4>
+            <h4 class="font-medium text-xs text-zinc-500 tracking-wide uppercase">Labels</h4>
             <Button variant="ghost" size="xs" interaction="toggle" :pressed="showLabelPicker()" @click="showLabelPicker.set(!showLabelPicker())">
               <span :if="!showLabelPicker()">Edit</span>
               <span :if="showLabelPicker()">Done</span>
@@ -365,7 +365,7 @@ function formatTimestamp(iso: string | null | undefined): 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="cardLabels().length === 0" class="italic text-zinc-400 text-xs">None</span>
+            <span :if="cardLabels().length === 0" class="italic text-xs text-zinc-400">None</span>
           </div>
 
           <div :if="showLabelPicker()" class="space-y-2">
@@ -395,7 +395,7 @@ function formatTimestamp(iso: string | null | undefined): string {
 
         <section>
           <div class="flex items-center justify-between mb-2">
-            <h4 class="font-medium text-zinc-500 text-xs tracking-wide uppercase">Assignees</h4>
+            <h4 class="font-medium text-xs text-zinc-500 tracking-wide uppercase">Assignees</h4>
             <Button variant="ghost" size="xs" interaction="toggle" :pressed="showAssigneePicker()" @click="showAssigneePicker.set(!showAssigneePicker())">
               <span :if="!showAssigneePicker()">Edit</span>
               <span :if="showAssigneePicker()">Done</span>
@@ -403,15 +403,15 @@ function formatTimestamp(iso: string | null | undefined): string {
           </div>
 
           <div :if="!showAssigneePicker()" class="flex flex-wrap gap-2">
-            <div :for="assignee in cardAssignees" class="flex gap-1.5 items-center text-zinc-700 text-xs dark:text-zinc-200">
+            <div :for="assignee in cardAssignees" class="flex gap-1.5 items-center text-xs text-zinc-700 dark:text-zinc-200">
               <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="cardAssignees().length === 0" class="italic text-zinc-400 text-xs">Unassigned</span>
+            <span :if="cardAssignees().length === 0" class="italic text-xs text-zinc-400">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>
+            <p :if="kanban.users().length === 0" class="italic text-xs text-zinc-400">No users to assign.</p>
             <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>
@@ -421,8 +421,8 @@ function formatTimestamp(iso: string | null | undefined): string {
         </section>
 
         <section>
-          <h4 class="mb-2 font-medium text-zinc-500 text-xs tracking-wide uppercase">Due date</h4>
-          <input type="date" x-model="dueDateDraft" name="due_date" @change="commitDueDate()" class="px-2 py-1 w-full text-zinc-800 text-xs dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none" />
+          <h4 class="mb-2 font-medium text-xs text-zinc-500 tracking-wide uppercase">Due date</h4>
+          <input type="date" x-model="dueDateDraft" name="due_date" @change="commitDueDate()" class="px-2 py-1 w-full text-xs text-zinc-800 dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none" />
         </section>
 
         <section class="pt-3 border-t border-zinc-200 dark:border-zinc-800">