@stacksjs/defaults 0.75.128 → 0.75.130

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

@@ -32,8 +32,9 @@ selects that file. Keep the command and CI on the same policy.
 
 Buddy discovers tracked files plus untracked files allowed by `.gitignore`.
 Its extension and path predicate lives in `@stacksjs/actions/lint/files`;
-code-style discovery currently includes ts, js, json, md, yaml and yml.
-Use Pickier directly to include stx and shell sources. Generated framework
+Code-style discovery includes ts, js, stx, json, md, yaml and yml, including
+Crosswind checks in tracked and newly created STX templates. Use Pickier directly
+to include shell sources. Generated framework
 assets belong to the upstream framework's checks, not application edits.
 
 ## Conventions

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.128",
+  "version": "0.75.130",
   "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.128",
+  "version": "0.75.130",
   "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.128",
+    "@stacksjs/mobile": "0.75.130",
     "@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">

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

@@ -61,8 +61,8 @@ function save(): void {
   @close="close"
 >
   <div :if="guardOptions().length > 0" class="px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
-    <label for="assignment-guard" class="block mb-1.5 font-medium text-zinc-600 text-xs dark:text-zinc-400">Guard</label>
-    <select id="assignment-guard" x-model="guardValue" name="guard" class="px-3 py-1.5 w-full text-zinc-900 text-sm dark:text-zinc-100 bg-white dark:bg-neutral-800 border border-zinc-300 rounded-md dark:border-zinc-700 focus:border-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-500/20" @change="changeGuard">
+    <label for="assignment-guard" class="block mb-1.5 font-medium text-xs text-zinc-600 dark:text-zinc-400">Guard</label>
+    <select id="assignment-guard" x-model="guardValue" name="guard" class="px-3 py-1.5 w-full text-sm text-zinc-900 dark:text-zinc-100 bg-white dark:bg-neutral-800 border border-zinc-300 rounded-md dark:border-zinc-700 focus:border-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-500/20" @change="changeGuard">
       <template :for="option in guardOptions()">
         <option :value="option.value">{{ option.label }}</option>
       </template>
@@ -70,16 +70,16 @@ function save(): void {
   </div>
 
   <div class="px-5 py-4 space-y-2">
-    <div :if="loading()" class="flex gap-2 items-center py-6 text-zinc-500 text-sm">
+    <div :if="loading()" class="flex gap-2 items-center py-6 text-sm text-zinc-500">
       <span class="h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
       Loading assignments...
     </div>
-    <div :if="!loading() && options().length === 0" class="text-zinc-500 text-sm">{{ emptyMessage() }}</div>
+    <div :if="!loading() && options().length === 0" class="text-sm text-zinc-500">{{ emptyMessage() }}</div>
     <template :if="!loading()" :for="option in options()">
       <label class="flex gap-2 items-center px-2 py-1.5 hover:bg-zinc-50 dark:hover:bg-neutral-800 rounded-md cursor-pointer">
         <input name="assignments" type="checkbox" :value="option.name" :checked="selected().includes(option.name)" class="h-4 w-4 text-violet-600 border-zinc-300 rounded dark:border-zinc-700 focus:ring-violet-500" @change="toggle(option.name)" />
-        <span class="text-zinc-900 text-sm dark:text-zinc-100">{{ option.name }}</span>
-        <span class="text-zinc-500 text-xs">{{ option.description || '' }}</span>
+        <span class="text-sm text-zinc-900 dark:text-zinc-100">{{ option.name }}</span>
+        <span class="text-xs text-zinc-500">{{ option.description || '' }}</span>
       </label>
     </template>
   </div>

package/resources/components/Dashboard/Marketing/AbandonedCartsDashboard.stx

@@ -204,7 +204,7 @@ onMount(() => {
     <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Ordinary campaigns aimed at cold carts. They send, report and are edited on the campaigns screen like any other.</p>
     <ul class="mt-3 divide-gray-200 divide-y dark:divide-neutral-700">
       <template :for="campaign in campaigns">
-        <li class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+        <li class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between py-3">
           <div>
             <p class="font-medium text-gray-900 text-sm dark:text-white">{{ campaign.name }}</p>
             <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Carts idle {{ campaign.idleHours }}h or more<span :if="campaign.minimumValue > 0"> · {{ money(campaign.minimumValue) }} and up</span> · {{ campaignTiming(campaign) }}</p>

package/resources/components/Dashboard/Marketing/AbandonedCartsTable.stx

@@ -80,7 +80,7 @@ function stateClass(record: AbandonedCartRecord): string {
               <p class="text-gray-900 text-sm dark:text-white">{{ contents(record) }}</p>
               <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Cart #{{ record.id }}</p>
             </td>
-            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm tabular-nums dark:text-white">{{ money(record.value, record.currency) }}</p></td>
+            <td class="px-4 py-4"><p class="font-medium tabular-nums text-gray-900 text-sm dark:text-white">{{ money(record.value, record.currency) }}</p></td>
             <td class="px-4 py-4"><p class="text-gray-900 text-sm dark:text-white">{{ idle(record.idleHours) }}</p></td>
             <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + stateClass(record)">{{ stateLabel(record) }}</span></td>
           </tr>

package/resources/components/Dashboard/Operations/AuditDashboard.stx

@@ -12,5 +12,5 @@ onMount(() => void load())
   <PageHeader title="Operations" description="Inspect the append-only operator event stream with actor and operation correlation."><template #actions><Button variant="secondary" :loading="loading()" @click="load"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button></template></PageHeader>
   <OperationsNavigation active="audit" />
   <section class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4"><StatsCard title="Events" :value="String(data()?.summary.events || 0)" icon="i-hugeicons-activity-03" iconBg="primary" :loading="loading()" /><StatsCard title="Operators" :value="String(data()?.summary.operators || 0)" icon="i-hugeicons-user-group" iconBg="neutral" :loading="loading()" /><StatsCard title="Failures" :value="String(data()?.summary.failures || 0)" icon="i-hugeicons-alert-02" iconBg="warning" :loading="loading()" /><StatsCard title="Latest sequence" :value="String(data()?.summary.latestSequence || 0)" icon="i-hugeicons-list-view" iconBg="success" :loading="loading()" /></section>
-  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800"><div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-800"><h2 class="font-semibold text-gray-900 dark:text-white">Operator events</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Events are sequence ordered and retained in the ts-cloud control plane.</p></div><div :if="!loading() && !data()?.events.length" class="px-6 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">No operator events have been recorded.</div><div class="max-h-[42rem] overflow-auto divide-y divide-gray-100 dark:divide-neutral-800"><div :for="event in data()?.events || []" class="grid gap-2 px-4 py-3 md:grid-cols-[5rem_1fr_10rem_12rem]"><span class="font-mono text-gray-400 text-xs">#{{ event.sequence }}</span><div><p class="font-medium text-gray-900 text-sm dark:text-white">{{ event.type }}</p><p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ event.operationId || event.id }}</p></div><span class="text-gray-600 text-sm dark:text-neutral-300">{{ event.actorName }}</span><time class="text-gray-500 text-xs dark:text-neutral-400">{{ date(event.createdAt) }}</time></div></div></section>
+  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800"><div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-800"><h2 class="font-semibold text-gray-900 dark:text-white">Operator events</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Events are sequence ordered and retained in the ts-cloud control plane.</p></div><div :if="!loading() && !data()?.events.length" class="px-6 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">No operator events have been recorded.</div><div class="overflow-auto max-h-[42rem] divide-gray-100 divide-y dark:divide-neutral-800"><div :for="event in data()?.events || []" class="grid gap-2 md:grid-cols-[5rem_1fr_10rem_12rem] px-4 py-3"><span class="font-mono text-gray-400 text-xs">#{{ event.sequence }}</span><div><p class="font-medium text-gray-900 text-sm dark:text-white">{{ event.type }}</p><p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ event.operationId || event.id }}</p></div><span class="text-gray-600 text-sm dark:text-neutral-300">{{ event.actorName }}</span><time class="text-gray-500 text-xs dark:text-neutral-400">{{ date(event.createdAt) }}</time></div></div></section>
 </div>

package/resources/components/Dashboard/Operations/ChangeDashboard.stx

@@ -46,7 +46,7 @@ onMount(() => void load())
   <section class="grid gap-6 lg:grid-cols-2">
     <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800">
       <div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-800"><h2 class="font-semibold text-gray-900 dark:text-white">Change plan</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Current model and runtime changes for {{ data()?.environment?.name || 'this environment' }}.</p></div>
-      <div class="divide-y divide-gray-100 dark:divide-neutral-800">
+      <div class="divide-gray-100 divide-y dark:divide-neutral-800">
         <div class="flex items-center justify-between px-4 py-3"><span class="text-gray-700 text-sm dark:text-neutral-300">Model-derived schema operations</span><Badge :variant="data()?.summary.destructiveChanges ? 'warning' : 'info'">{{ data()?.summary.migrationChanges || 0 }}</Badge></div>
         <div class="flex items-center justify-between px-4 py-3"><span class="text-gray-700 text-sm dark:text-neutral-300">Migration ledger drift</span><Badge :variant="data()?.migrations.summary.drift ? 'warning' : 'success'">{{ data()?.migrations.summary.drift ? 'Review' : 'Clean' }}</Badge></div>
         <div class="flex items-center justify-between px-4 py-3"><span class="text-gray-700 text-sm dark:text-neutral-300">Running or queued control-plane work</span><Badge variant="default">{{ data()?.activeOperations.length || 0 }}</Badge></div>
@@ -55,7 +55,7 @@ onMount(() => void load())
     <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800">
       <div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-800"><h2 class="font-semibold text-gray-900 dark:text-white">Release approvals</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Only native releases explicitly marked as approval-required appear here.</p></div>
       <div :if="!loading() && !data()?.pendingReleases.length" class="px-6 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">No releases are awaiting approval.</div>
-      <button :for="release in data()?.pendingReleases || []" type="button" class="flex w-full items-center justify-between gap-3 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-neutral-800" @click="selected.set(release)"><div><p class="font-medium text-gray-900 text-sm dark:text-white">{{ release.sourceSha || release.id }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ release.kind }} · {{ release.strategy }}</p></div><Badge variant="warning">Review</Badge></button>
+      <button :for="release in data()?.pendingReleases || []" type="button" class="flex gap-3 items-center justify-between px-4 py-3 w-full text-left hover:bg-gray-50 dark:hover:bg-neutral-800" @click="selected.set(release)"><div><p class="font-medium text-gray-900 text-sm dark:text-white">{{ release.sourceSha || release.id }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ release.kind }} · {{ release.strategy }}</p></div><Badge variant="warning">Review</Badge></button>
     </div>
   </section>
   <OperationHistory :operations="data()?.recentOperations || []" :loading="loading()" />

package/resources/components/Dashboard/Operations/IncidentDashboard.stx

@@ -32,7 +32,7 @@ onMount(() => void load())
   <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800">
     <div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-800"><h2 class="font-semibold text-gray-900 dark:text-white">Incidents</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Acknowledgement does not resolve an alert. Resolution follows recovered signal evidence.</p></div>
     <div :if="!loading() && !data()?.alerts.length" class="px-6 py-12 text-center"><span class="mx-auto h-8 w-8 text-green-500 i-hugeicons-checkmark-circle-02"></span><p class="mt-3 font-medium text-gray-900 dark:text-white">No incidents</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">No native alert is pending, firing, resolved, or silenced in this environment.</p></div>
-    <button :for="alert in data()?.alerts || []" type="button" class="flex w-full items-start justify-between gap-4 px-4 py-4 text-left border-b border-gray-100 last:border-0 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-neutral-800" @click="selected.set(alert)"><div><div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ alert.title }}</p><Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ alert.state }} · {{ alert.occurrenceCount }} occurrences · {{ alert.ownerName || 'Unassigned' }}</p></div><span class="h-4 w-4 text-gray-400 i-hugeicons-arrow-right-01"></span></button>
+    <button :for="alert in data()?.alerts || []" type="button" class="flex gap-4 items-start justify-between px-4 py-4 w-full text-left hover:bg-gray-50 dark:hover:bg-neutral-800 border-b border-gray-100 dark:border-neutral-800 last:border-0" @click="selected.set(alert)"><div><div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ alert.title }}</p><Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ alert.state }} · {{ alert.occurrenceCount }} occurrences · {{ alert.ownerName || 'Unassigned' }}</p></div><span class="h-4 w-4 text-gray-400 i-hugeicons-arrow-right-01"></span></button>
   </section>
   <OperationHistory :operations="data()?.operations || []" :loading="loading()" />
   <Modal :isOpen="Boolean(selected())" title="Incident actions" :description="selected()?.title || ''" size="sm" @close="selected.set(null)"><div class="grid gap-2"><Button variant="secondary" :loading="busy() === 'acknowledge'" @click="mutate('acknowledge')">Acknowledge</Button><Button variant="secondary" :loading="busy() === 'assign_self'" @click="mutate('assign_self')">Assign to me</Button><Button variant="secondary" :loading="busy() === 'silence'" @click="mutate('silence')">Silence for one hour</Button></div></Modal>

package/resources/components/Dashboard/Operations/MigrationDashboard.stx

@@ -89,7 +89,7 @@ onMount(() => void load())
   </section>
 
   <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800">
-    <div class="flex flex-col gap-3 px-4 py-4 border-b border-gray-200 dark:border-neutral-800 sm:flex-row sm:items-center sm:justify-between">
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-4 border-b border-gray-200 dark:border-neutral-800">
       <div>
         <h2 class="font-semibold text-gray-900 dark:text-white">Schema plan</h2>
         <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ data()?.dialect || 'database' }} in {{ data()?.environment || 'current environment' }}. The plan revision is rechecked at execution.</p>
@@ -101,8 +101,8 @@ onMount(() => void load())
       <p class="mt-3 font-medium text-gray-900 dark:text-white">Schema is current</p>
       <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Models and the connected database have no pending structural changes.</p>
     </div>
-    <div :if="data()?.operations.length" class="divide-y divide-gray-100 dark:divide-neutral-800">
-      <div :for="operation in data()?.operations || []" class="flex items-start justify-between gap-4 px-4 py-3">
+    <div :if="data()?.operations.length" class="divide-gray-100 divide-y dark:divide-neutral-800">
+      <div :for="operation in data()?.operations || []" class="flex gap-4 items-start justify-between px-4 py-3">
         <div>
           <p class="font-medium text-gray-900 text-sm dark:text-white">{{ operation.kind.replaceAll('_', ' ') }}</p>
           <p class="mt-0.5 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ operation.table }}{{ operation.column ? '.' + operation.column : '' }}</p>
@@ -113,16 +113,16 @@ onMount(() => void load())
   </section>
 
   <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800">
-    <div class="flex items-center justify-between gap-3 px-4 py-4 border-b border-gray-200 dark:border-neutral-800">
+    <div class="flex gap-3 items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-neutral-800">
       <div>
         <h2 class="font-semibold text-gray-900 dark:text-white">Migration ledger</h2>
         <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Compared with both migration files and live schema effects.</p>
       </div>
       <Button variant="secondary" :disabled="!data()?.summary.drift" @click="openDialog('reconcile')">Reconcile provable drift</Button>
     </div>
-    <div class="max-h-96 overflow-auto divide-y divide-gray-100 dark:divide-neutral-800">
-      <div :for="entry in data()?.ledger.entries || []" class="flex items-center justify-between gap-4 px-4 py-3">
-        <span class="min-w-0 truncate font-mono text-gray-700 text-xs dark:text-neutral-300">{{ entry.file }}</span>
+    <div class="overflow-auto max-h-96 divide-gray-100 divide-y dark:divide-neutral-800">
+      <div :for="entry in data()?.ledger.entries || []" class="flex gap-4 items-center justify-between px-4 py-3">
+        <span class="min-w-0 font-mono text-gray-700 text-xs truncate dark:text-neutral-300">{{ entry.file }}</span>
         <span :class="'shrink-0 px-2 py-1 font-medium text-xs rounded-md ' + statusClass(entry.status)">{{ entry.status }}</span>
       </div>
     </div>

package/resources/components/Dashboard/Operations/OperationHistory.stx

@@ -46,7 +46,7 @@ function statusVariant(state: OperatorOperation['state']): 'default' | 'primary'
     <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ emptyDescription() }}</p>
   </div>
   <ul :if="rows().length > 0" class="divide-gray-200 divide-y dark:divide-neutral-700">
-    <li :for="operation in rows()" class="flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+    <li :for="operation in rows()" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 py-4">
       <div class="min-w-0">
         <div class="flex flex-wrap gap-2 items-center">
           <p class="font-medium text-gray-900 text-sm dark:text-white">{{ actionLabel(operation) }}</p>
@@ -55,7 +55,7 @@ function statusVariant(state: OperatorOperation['state']): 'default' | 'primary'
         <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ operation.actorName }} at {{ formatDate(operation.finishedAt || operation.createdAt) }}</p>
         <p :if="operation.error" class="mt-1 text-red-600 text-xs dark:text-red-400">{{ operation.error }}</p>
       </div>
-      <code class="font-mono text-gray-400 text-[11px] dark:text-neutral-500">{{ operation.id }}</code>
+      <code class="font-mono text-[11px] text-gray-400 dark:text-neutral-500">{{ operation.id }}</code>
     </li>
   </ul>
 </Card>

package/resources/components/Dashboard/Operations/RecoveryDashboard.stx

@@ -178,9 +178,9 @@ onMount(() => { void loadRecovery() })
   </PageHeader>
   <OperationsNavigation active="recovery" />
 
-  <div :if="loadError()" role="alert" class="flex flex-col gap-3 px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900 sm:flex-row sm:items-center sm:justify-between"><span>{{ loadError() }}</span><Button size="sm" variant="secondary" @click="loadRecovery">Try again</Button></div>
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button size="sm" variant="secondary" @click="loadRecovery">Try again</Button></div>
 
-  <div :if="!isLoading() && (data()?.destinations.length || 0) === 0" class="flex flex-col gap-4 p-5 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-xl dark:border-amber-900 sm:flex-row sm:items-center sm:justify-between">
+  <div :if="!isLoading() && (data()?.destinations.length || 0) === 0" class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-5 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-xl dark:border-amber-900">
     <div><p class="font-semibold">No recovery destination is connected</p><p class="mt-1 text-sm">Nothing is protected yet. Connect object storage or AWS Backup, then run its health test before creating policies.</p></div>
     <Button @click="showDestination.set(true)">Connect destination</Button>
   </div>
@@ -194,7 +194,7 @@ onMount(() => { void loadRecovery() })
   </section>
 
   <section>
-    <div class="flex flex-col gap-3 mb-3 sm:flex-row sm:items-end sm:justify-between">
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between mb-3">
       <div><h2 class="font-semibold text-gray-900 dark:text-white">Destinations and policies</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Coverage is healthy only when a destination is healthy and the latest point meets its RPO.</p></div>
       <Button size="sm" variant="outline" :loading="busyId() === 'retention'" :disabled="busyId() !== ''" @click="retention">Run retention</Button>
     </div>

package/resources/components/Dashboard/Operations/RecoveryDestinationDialog.stx

@@ -84,12 +84,12 @@ function submit(): void {
     </div>
 
     <details :if="provider() !== 'aws_backup'" class="p-4 bg-gray-50 dark:bg-neutral-900/60 border border-gray-200 rounded-lg dark:border-neutral-700">
-      <summary class="font-medium text-gray-900 text-sm cursor-pointer dark:text-white">Static credentials, optional</summary>
+      <summary class="font-medium text-gray-900 text-sm dark:text-white cursor-pointer">Static credentials, optional</summary>
       <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Leave blank to use the runtime's AWS credential chain. Submitted credentials are encrypted in the control plane.</p>
-      <div class="grid gap-4 mt-4 sm:grid-cols-2">
+      <div class="grid gap-4 sm:grid-cols-2 mt-4">
         <input x-model.trim="accessKeyId" autocomplete="off" placeholder="Access key id" aria-label="Access key id" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
         <input x-model="secretAccessKey" type="password" autocomplete="new-password" placeholder="Secret access key" aria-label="Secret access key" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
-        <input x-model="sessionToken" type="password" autocomplete="new-password" placeholder="Session token, optional" aria-label="Session token" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700 sm:col-span-2" />
+        <input x-model="sessionToken" type="password" autocomplete="new-password" placeholder="Session token, optional" aria-label="Session token" class="sm:col-span-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
       </div>
     </details>
 

package/resources/components/Dashboard/Operations/RecoveryJobList.stx

@@ -20,13 +20,13 @@ function variant(status: RecoveryJob['status']): 'default' | 'primary' | 'succes
 <Card title="Recovery jobs" subtitle="Durable backup, verification, restore, drill, and retention work." padding="none">
   <div :if="jobs().length === 0" class="px-5 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">No recovery jobs queued</div>
   <ul :if="jobs().length > 0" class="divide-gray-200 divide-y dark:divide-neutral-700">
-    <li :for="job in jobs().slice(0, 12)" class="flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+    <li :for="job in jobs().slice(0, 12)" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 py-4">
       <div>
-        <div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm capitalize dark:text-white">{{ job.kind }}</p><Badge :variant="variant(job.status)">{{ job.status }}</Badge></div>
+        <div class="flex gap-2 items-center"><p class="capitalize font-medium text-gray-900 text-sm dark:text-white">{{ job.kind }}</p><Badge :variant="variant(job.status)">{{ job.status }}</Badge></div>
         <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ job.progress.phase || 'queued' }} · {{ formatDate(job.finishedAt || job.startedAt || job.createdAt) }}</p>
         <p :if="job.error" class="mt-1 text-red-600 text-xs dark:text-red-400">{{ job.error }}</p>
       </div>
-      <code class="font-mono text-gray-400 text-[11px] dark:text-neutral-500">{{ job.id }}</code>
+      <code class="font-mono text-[11px] text-gray-400 dark:text-neutral-500">{{ job.id }}</code>
     </li>
   </ul>
 </Card>

package/resources/components/Dashboard/Operations/RecoveryRestoreDialog.stx

@@ -59,7 +59,7 @@ function execute(): void { emit('execute', input(true)) }
       </div>
     </div>
     <label :if="mode() === 'isolated'" class="inline-flex gap-2 items-center text-gray-700 text-sm dark:text-neutral-200"><input x-model="drill" type="checkbox" /> Run as a recovery drill and clean the isolated target after health validation</label>
-    <div :if="mode() === 'in_place'" class="space-y-4 p-4 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">
+    <div :if="mode() === 'in_place'" class="p-4 space-y-4 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">
       <p class="font-medium text-sm">In-place restore replaces live data and requires a distinct verified safety point.</p>
       <div>
         <label for="restore-safety" class="block mb-1.5 font-medium text-sm">Safety recovery point</label>

package/resources/components/Dashboard/Operations/SchedulerDashboard.stx

@@ -97,7 +97,7 @@ onMount(() => {
 
   <OperationsNavigation active="scheduler" />
 
-  <div :if="loadError()" role="alert" class="flex flex-col gap-3 px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900 sm:flex-row sm:items-center sm:justify-between">
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
     <span>{{ loadError() }}</span>
     <Button size="sm" variant="secondary" @click="loadOperations">Try again</Button>
   </div>

package/resources/components/NativeNavBar.stx

@@ -92,7 +92,7 @@ function tapBack(event: MouseEvent): void {
       <slot name="leading" />
     </div>
     <p class="native-nav-title" aria-hidden="{{ large ? 'true' : 'false' }}">{{ navTitle() }}</p>
-    <div class="native-nav-side native-nav-actions">
+    <div class="native-nav-actions native-nav-side">
       <slot name="actions" />
     </div>
   </header>

package/resources/views/auth/oauth/consent.stx

@@ -19,28 +19,28 @@ declare const csrfToken: string
 const clientTypeLabel = consent.client.type === 'public' ? 'Public client' : 'Confidential client'
 </script>
 
-<main class="flex min-h-dvh items-center justify-center bg-neutral-50 px-4 py-10 text-neutral-950 dark:bg-neutral-950 dark:text-white sm:px-6">
-  <section class="w-full max-w-xl" aria-labelledby="oauth-consent-title">
-    <div class="mb-5 flex items-center justify-center gap-2 text-neutral-500 text-sm dark:text-neutral-400">
+<main class="flex items-center justify-center px-4 py-10 sm:px-6 min-h-dvh text-neutral-950 dark:text-white bg-neutral-50 dark:bg-neutral-950">
+  <section class="max-w-xl w-full" aria-labelledby="oauth-consent-title">
+    <div class="flex gap-2 items-center justify-center mb-5 text-neutral-500 text-sm dark:text-neutral-400">
       <i class="h-5 w-5 i-hugeicons-shield-key" aria-hidden="true"></i>
       <span>Secure authorization</span>
     </div>
 
-    <div class="overflow-hidden border border-neutral-200 rounded-2xl bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
-      <header class="border-neutral-200 border-b px-6 py-6 dark:border-neutral-800 sm:px-8">
+    <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-2xl dark:border-neutral-800 shadow-sm">
+      <header class="px-6 py-6 sm:px-8 border-b border-neutral-200 dark:border-neutral-800">
         <p class="font-medium text-neutral-500 text-sm dark:text-neutral-400">Authorization request</p>
         <h1 id="oauth-consent-title" class="mt-2 font-semibold text-2xl tracking-tight sm:text-3xl">
           {{ consent.client.name }} wants to connect
         </h1>
-        <p class="mt-3 text-neutral-600 text-sm leading-6 dark:text-neutral-300">
+        <p class="mt-3 leading-6 text-neutral-600 text-sm dark:text-neutral-300">
           Review exactly what this application can access before you continue.
         </p>
       </header>
 
-      <div class="space-y-7 px-6 py-6 sm:px-8">
-        <dl class="grid gap-4 rounded-xl bg-neutral-50 p-4 dark:bg-neutral-800/60">
+      <div class="px-6 py-6 space-y-7 sm:px-8">
+        <dl class="grid gap-4 p-4 bg-neutral-50 dark:bg-neutral-800/60 rounded-xl">
           <div class="flex gap-3 items-start">
-            <i class="mt-0.5 h-5 w-5 shrink-0 text-neutral-500 i-hugeicons-user-circle dark:text-neutral-400" aria-hidden="true"></i>
+            <i class="shrink-0 mt-0.5 h-5 w-5 text-neutral-500 dark:text-neutral-400 i-hugeicons-user-circle" aria-hidden="true"></i>
             <div>
               <dt class="font-medium text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Signed in as</dt>
               <dd class="mt-1 font-medium text-neutral-900 text-sm dark:text-white">{{ signedInIdentity }}</dd>
@@ -49,7 +49,7 @@ const clientTypeLabel = consent.client.type === 'public' ? 'Public client' : 'Co
 
           @if (selectedWorkspace)
             <div class="flex gap-3 items-start">
-              <i class="mt-0.5 h-5 w-5 shrink-0 text-neutral-500 i-hugeicons-building-03 dark:text-neutral-400" aria-hidden="true"></i>
+              <i class="shrink-0 mt-0.5 h-5 w-5 text-neutral-500 dark:text-neutral-400 i-hugeicons-building-03" aria-hidden="true"></i>
               <div>
                 <dt class="font-medium text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Workspace</dt>
                 <dd class="mt-1 font-medium text-neutral-900 text-sm dark:text-white">{{ selectedWorkspace }}</dd>
@@ -58,7 +58,7 @@ const clientTypeLabel = consent.client.type === 'public' ? 'Public client' : 'Co
           @endif
 
           <div class="flex gap-3 items-start">
-            <i class="mt-0.5 h-5 w-5 shrink-0 text-neutral-500 i-hugeicons-computer-programming-01 dark:text-neutral-400" aria-hidden="true"></i>
+            <i class="shrink-0 mt-0.5 h-5 w-5 text-neutral-500 dark:text-neutral-400 i-hugeicons-computer-programming-01" aria-hidden="true"></i>
             <div>
               <dt class="font-medium text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Application type</dt>
               <dd class="mt-1 font-medium text-neutral-900 text-sm dark:text-white">{{ clientTypeLabel }}</dd>
@@ -68,10 +68,10 @@ const clientTypeLabel = consent.client.type === 'public' ? 'Public client' : 'Co
 
         <section aria-labelledby="oauth-permissions-title">
           <h2 id="oauth-permissions-title" class="font-semibold text-base">Permissions requested</h2>
-          <ul class="mt-3 divide-y divide-neutral-200 border border-neutral-200 rounded-xl dark:divide-neutral-800 dark:border-neutral-800">
+          <ul class="mt-3 border border-neutral-200 divide-neutral-200 divide-y rounded-xl dark:border-neutral-800 dark:divide-neutral-800">
             @foreach (consent.permissions as permission)
-              <li class="flex gap-3 px-4 py-4 items-start">
-                <i class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600 i-hugeicons-key-01 dark:text-emerald-400" aria-hidden="true"></i>
+              <li class="flex gap-3 items-start px-4 py-4">
+                <i class="shrink-0 mt-0.5 h-5 w-5 text-emerald-600 dark:text-emerald-400 i-hugeicons-key-01" aria-hidden="true"></i>
                 <div>
                   <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ permission.description }}</p>
                   <p class="mt-1 font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ permission.name }}</p>
@@ -86,12 +86,12 @@ const clientTypeLabel = consent.client.type === 'public' ? 'Public client' : 'Co
             <h2 id="oauth-resources-title" class="font-semibold text-base">Data access</h2>
             <ul class="mt-3 space-y-2">
               @foreach (consent.resources as resource)
-                <li class="flex gap-3 rounded-xl bg-neutral-50 px-4 py-3 items-start dark:bg-neutral-800/60">
-                  <i class="mt-0.5 h-5 w-5 shrink-0 text-neutral-500 i-hugeicons-database-02 dark:text-neutral-400" aria-hidden="true"></i>
+                <li class="flex gap-3 items-start px-4 py-3 bg-neutral-50 dark:bg-neutral-800/60 rounded-xl">
+                  <i class="shrink-0 mt-0.5 h-5 w-5 text-neutral-500 dark:text-neutral-400 i-hugeicons-database-02" aria-hidden="true"></i>
                   <div>
                     <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ resource.name }}</p>
                     @if (resource.description)
-                      <p class="mt-1 text-neutral-600 text-sm leading-5 dark:text-neutral-300">{{ resource.description }}</p>
+                      <p class="mt-1 leading-5 text-neutral-600 text-sm dark:text-neutral-300">{{ resource.description }}</p>
                     @endif
                   </div>
                 </li>
@@ -100,19 +100,19 @@ const clientTypeLabel = consent.client.type === 'public' ? 'Public client' : 'Co
           </section>
         @endif
 
-        <p class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-amber-950 text-sm leading-5 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100">
+        <p class="px-4 py-3 leading-5 text-amber-950 text-sm dark:text-amber-100 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 rounded-xl dark:border-amber-900/70">
           Only approve if you recognize this application and trust it with the permissions listed above.
         </p>
       </div>
 
-      <form method="POST" action="{{ consentAction }}" class="flex flex-col-reverse gap-3 border-neutral-200 border-t px-6 py-5 dark:border-neutral-800 sm:flex-row sm:justify-end sm:px-8">
+      <form method="POST" action="{{ consentAction }}" class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end px-6 py-5 sm:px-8 border-neutral-200 border-t dark:border-neutral-800">
         <input type="hidden" name="_token" value="{{ csrfToken }}">
         <input type="hidden" name="request_id" value="{{ consent.requestId }}">
         <button
           type="submit"
           name="decision"
           value="deny"
-          class="inline-flex min-h-11 items-center justify-center rounded-lg border border-neutral-300 px-5 py-2.5 font-semibold text-neutral-800 text-sm hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 dark:border-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-800 dark:focus:ring-offset-neutral-900"
+          class="inline-flex items-center justify-center px-5 py-2.5 min-h-11 font-semibold text-neutral-800 text-sm dark:text-neutral-100 hover:bg-neutral-50 dark:hover:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 dark:focus:ring-offset-neutral-900"
         >
           Deny
         </button>
@@ -120,14 +120,14 @@ const clientTypeLabel = consent.client.type === 'public' ? 'Public client' : 'Co
           type="submit"
           name="decision"
           value="approve"
-          class="inline-flex min-h-11 items-center justify-center rounded-lg bg-neutral-950 px-5 py-2.5 font-semibold text-sm text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200 dark:focus:ring-white dark:focus:ring-offset-neutral-900"
+          class="inline-flex items-center justify-center px-5 py-2.5 min-h-11 font-semibold text-sm text-white dark:text-neutral-950 bg-neutral-950 dark:bg-white hover:bg-neutral-800 dark:hover:bg-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 dark:focus:ring-white"
         >
           Allow access
         </button>
       </form>
     </div>
 
-    <p class="mt-5 text-center text-neutral-500 text-xs leading-5 dark:text-neutral-400">
+    <p class="mt-5 leading-5 text-center text-neutral-500 text-xs dark:text-neutral-400">
       You can revoke this connection later from your connected applications settings.
     </p>
   </section>

package/resources/views/cms/blocks/columns.stx

@@ -1,5 +1,5 @@
 {{-- Columns block: 1-4 sanitized HTML columns on a responsive grid. --}}
-<div class="cms-columns mx-auto max-w-6xl px-6 py-8">
+<div class="mx-auto px-6 py-8 max-w-6xl cms-columns">
   {{-- Literal class names, not `md:grid-cols-{{ n }}`: Crosswind extracts
        classes from template SOURCE, so a composed name generates no CSS. --}}
   <div class="grid grid-cols-1 gap-8 {{ props.columns.length === 4 ? 'md:grid-cols-4' : (props.columns.length === 3 ? 'md:grid-cols-3' : (props.columns.length === 2 ? 'md:grid-cols-2' : '')) }}">

package/resources/views/cms/blocks/cta.stx

@@ -1,8 +1,8 @@
 {{-- Call-to-action band. --}}
-<section class="cms-cta mx-auto max-w-4xl px-6 py-16 text-center">
-  <h2 class="text-3xl tracking-tight font-semibold">{{ props.heading }}</h2>
+<section class="mx-auto px-6 py-16 max-w-4xl text-center cms-cta">
+  <h2 class="font-semibold text-3xl tracking-tight">{{ props.heading }}</h2>
   @if (props.body)
-    <p class="mt-4 text-lg text-gray-600 max-w-[65ch] mx-auto">{{ props.body }}</p>
+    <p class="mt-4 mx-auto max-w-[65ch] text-gray-600 text-lg">{{ props.body }}</p>
   @endif
-  <a href="{{ props.buttonHref }}" class="mt-8 inline-block rounded-lg px-6 py-3 font-medium bg-gray-900 text-white transition-transform active:scale-[0.98]">{{ props.buttonLabel }}</a>
+  <a href="{{ props.buttonHref }}" class="inline-block mt-8 px-6 py-3 font-medium text-white bg-gray-900 rounded-lg transition-transform active:scale-[0.98]">{{ props.buttonLabel }}</a>
 </section>

package/resources/views/cms/blocks/embed.stx

@@ -1,5 +1,5 @@
 {{-- Embed block: sandboxed iframe, never inline third-party markup. --}}
-<div class="cms-embed mx-auto max-w-4xl px-6 py-8">
+<div class="mx-auto px-6 py-8 max-w-4xl cms-embed">
   <div class="relative w-full overflow-hidden rounded-lg {{ props.aspect === '4:3' ? 'aspect-[4/3]' : (props.aspect === '1:1' ? 'aspect-square' : 'aspect-video') }}">
     <iframe
       src="{{ props.src }}"

package/resources/views/cms/blocks/form.stx

@@ -5,7 +5,7 @@
   and submits through useMutation, which repeats the page's CSRF cookie in
   the header the submit route checks.
 --}}
-<div class="cms-form mx-auto max-w-xl px-6 py-8" data-form-uuid="{{ props.formUuid }}">
+<div class="mx-auto px-6 py-8 max-w-xl cms-form" data-form-uuid="{{ props.formUuid }}">
   <script client>
   import type { PublicFormDefinition, PublicFormField, SubmissionErrors } from '@stacksjs/forms'
   import { moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
@@ -225,29 +225,29 @@
   </script>
 
   <div ref="host" data-form-uuid="{{ props.formUuid }}">
-    <div :if="done()" class="rounded-lg border border-green-200 bg-green-50 px-5 py-4 text-[15px] text-green-900">{{ done() }}</div>
+    <div :if="done()" class="px-5 py-4 text-[15px] text-green-900 bg-green-50 border border-green-200 rounded-lg">{{ done() }}</div>
     <form :else-if="definition()" @submit="submit" novalidate>
-      <h2 class="text-2xl font-semibold tracking-tight">{{ definition()?.name }}</h2>
-      <p :if="errors()._form" class="mt-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-[14px] text-red-800">{{ errors()._form }}</p>
+      <h2 class="font-semibold text-2xl tracking-tight">{{ definition()?.name }}</h2>
+      <p :if="errors()._form" class="mt-3 px-4 py-3 text-[14px] text-red-800 bg-red-50 border border-red-200 rounded-lg">{{ errors()._form }}</p>
 
-      <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2">
+      <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 mt-6">
         <template :for="field in definition()?.fields ?? []">
           <div :if="fieldVisible(field)" class="{{ field.width === 'half' ? '' : 'sm:col-span-2' }}">
-            <h3 :if="field.type === 'section_break'" class="mt-2 border-t border-gray-200 pt-4 text-lg font-medium">{{ field.label }}</h3>
+            <h3 :if="field.type === 'section_break'" class="mt-2 pt-4 font-medium text-lg border-gray-200 border-t">{{ field.label }}</h3>
             <template :else>
-              <label class="block text-[14px] font-medium text-gray-800">{{ field.label }}<span :if="field.required" aria-hidden="true" class="text-red-500"> *</span></label>
-              <textarea :if="field.type === 'textarea'" rows="4" :required="field.required" placeholder="{{ field.options.placeholder ?? '' }}" @input="values[field.name] = $event.target.value" class="mt-1.5 w-full rounded-lg border border-gray-300 px-3.5 py-2.5 text-[15px]"></textarea>
-              <select :else-if="field.type === 'select'" :required="field.required" @change="values[field.name] = $event.target.value" class="mt-1.5 w-full rounded-lg border border-gray-300 px-3.5 py-2.5 text-[15px] bg-white">
+              <label class="block font-medium text-[14px] text-gray-800">{{ field.label }}<span :if="field.required" aria-hidden="true" class="text-red-500"> *</span></label>
+              <textarea :if="field.type === 'textarea'" rows="4" :required="field.required" placeholder="{{ field.options.placeholder ?? '' }}" @input="values[field.name] = $event.target.value" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] border border-gray-300 rounded-lg"></textarea>
+              <select :else-if="field.type === 'select'" :required="field.required" @change="values[field.name] = $event.target.value" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] bg-white border border-gray-300 rounded-lg">
                 <option value="">Choose...</option>
                 <option :for="choice in field.options.choices ?? []" value="{{ choice.value }}">{{ choice.label }}</option>
               </select>
               <div :else-if="field.type === 'radio'" class="mt-2 space-y-2">
-                <label :for="choice in field.options.choices ?? []" class="flex items-center gap-2.5 text-[15px]">
+                <label :for="choice in field.options.choices ?? []" class="flex gap-2.5 items-center text-[15px]">
                   <input type="radio" name="{{ field.name }}" value="{{ choice.value }}" @change="values[field.name] = $event.target.value" class="h-4 w-4">
                   {{ choice.label }}
                 </label>
               </div>
-              <label :else-if="field.type === 'checkbox'" class="mt-2 flex items-center gap-2.5 text-[15px]">
+              <label :else-if="field.type === 'checkbox'" class="flex gap-2.5 items-center mt-2 text-[15px]">
                 <input type="checkbox" @change="values[field.name] = $event.target.checked" class="h-4 w-4 rounded">
                 {{ field.options.placeholder ?? 'Yes' }}
               </label>
@@ -255,11 +255,11 @@
                    a person typed prose into what should have been a picker and
                    the submission could never satisfy it. --}}
               <div :else-if="field.type === 'file'" class="mt-1.5">
-                <input type="file" :required="field.required && !values[field.name]" :disabled="uploading[field.name]" accept="{{ acceptAttr(field) }}" @change="uploadFile(field, $event)" class="block w-full text-[15px] file:mr-3 file:rounded-lg file:border-0 file:bg-gray-100 file:px-3.5 file:py-2 file:text-[14px] file:font-medium">
+                <input type="file" :required="field.required && !values[field.name]" :disabled="uploading[field.name]" accept="{{ acceptAttr(field) }}" @change="uploadFile(field, $event)" class="block file:mr-3 file:px-3.5 file:py-2 w-full text-[15px] file:font-medium file:text-[14px] file:bg-gray-100 file:border-0 file:rounded-lg">
                 <p :if="uploading[field.name]" class="mt-1.5 text-[13px] text-gray-500">Uploading...</p>
                 <p :else-if="attached[field.name]" class="mt-1.5 text-[13px] text-green-700">Attached {{ attached[field.name] }}</p>
               </div>
-              <input :else type="{{ field.type === 'email' ? 'email' : (field.type === 'phone' ? 'tel' : (field.type === 'date' ? 'date' : (field.type === 'currency' ? 'number' : 'text'))) }}" :required="field.required" placeholder="{{ field.options.placeholder ?? '' }}" :step="field.type === 'currency' ? moneyInputStep(formCurrency()) : null" @input="setInput(field, $event.target.value)" class="mt-1.5 w-full rounded-lg border border-gray-300 px-3.5 py-2.5 text-[15px]">
+              <input :else type="{{ field.type === 'email' ? 'email' : (field.type === 'phone' ? 'tel' : (field.type === 'date' ? 'date' : (field.type === 'currency' ? 'number' : 'text'))) }}" :required="field.required" placeholder="{{ field.options.placeholder ?? '' }}" :step="field.type === 'currency' ? moneyInputStep(formCurrency()) : null" @input="setInput(field, $event.target.value)" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] border border-gray-300 rounded-lg">
               <p :if="errors()[field.name]" class="mt-1.5 text-[13px] text-red-600">{{ errors()[field.name] }}</p>
             </template>
           </div>
@@ -268,7 +268,7 @@
 
       <input type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" class="hidden" @input="values._hp = $event.target.value">
 
-      <button type="submit" :disabled="sending() || anyUploading()" class="mt-7 rounded-lg px-6 py-3 font-medium bg-gray-900 text-white transition-transform active:scale-[0.98] disabled:opacity-60">
+      <button type="submit" :disabled="sending() || anyUploading()" class="mt-7 px-6 py-3 font-medium text-white bg-gray-900 rounded-lg disabled:opacity-60 transition-transform active:scale-[0.98]">
         {{ sending() ? 'Sending...' : (definition()?.submitLabel ?? 'Submit') }}
       </button>
     </form>

package/resources/views/cms/blocks/hero.stx

@@ -1,16 +1,16 @@
 {{-- Hero block: heading, optional subheading/image/CTA. --}}
 <section class="cms-hero relative overflow-hidden {{ props.align === 'center' ? 'text-center' : 'text-left' }}">
   @if (props.imageUrl)
-    <img src="{{ props.imageUrl }}" alt="" class="absolute inset-0 h-full w-full object-cover" aria-hidden="true">
+    <img src="{{ props.imageUrl }}" alt="" class="absolute inset-0 object-cover h-full w-full" aria-hidden="true">
     <div class="absolute inset-0 bg-black/45" aria-hidden="true"></div>
   @endif
   <div class="relative mx-auto max-w-4xl px-6 py-24 {{ props.imageUrl ? 'text-white' : '' }}">
-    <h1 class="text-4xl md:text-6xl tracking-tighter leading-none font-semibold">{{ props.heading }}</h1>
+    <h1 class="font-semibold leading-none text-4xl tracking-tighter md:text-6xl">{{ props.heading }}</h1>
     @if (props.subheading)
       <p class="mt-5 text-lg md:text-xl max-w-[65ch] {{ props.align === 'center' ? 'mx-auto' : '' }} opacity-90">{{ props.subheading }}</p>
     @endif
     @if (props.ctaLabel && props.ctaHref)
-      <a href="{{ props.ctaHref }}" class="mt-8 inline-block rounded-lg px-6 py-3 font-medium bg-white text-gray-900 shadow-sm transition-transform active:scale-[0.98]">{{ props.ctaLabel }}</a>
+      <a href="{{ props.ctaHref }}" class="inline-block mt-8 px-6 py-3 font-medium text-gray-900 bg-white rounded-lg shadow-sm transition-transform active:scale-[0.98]">{{ props.ctaLabel }}</a>
     @endif
   </div>
 </section>

package/resources/views/cms/blocks/image.stx

@@ -2,6 +2,6 @@
 <figure class="cms-image mx-auto px-6 py-8 {{ props.width === 'full' ? 'max-w-none px-0' : (props.width === 'wide' ? 'max-w-6xl' : 'max-w-3xl') }}">
   <img src="{{ props.src }}" alt="{{ props.alt }}" class="w-full rounded-lg" loading="lazy">
   @if (props.caption)
-    <figcaption class="mt-3 text-sm text-gray-500">{{ props.caption }}</figcaption>
+    <figcaption class="mt-3 text-gray-500 text-sm">{{ props.caption }}</figcaption>
   @endif
 </figure>

package/resources/views/cms/blocks/rich-text.stx

@@ -1,4 +1,4 @@
 {{-- Rich text block. `props.html` is sanitized by the render pipeline before it gets here. --}}
-<div class="cms-rich-text mx-auto max-w-3xl px-6 py-8 leading-relaxed">
+<div class="mx-auto px-6 py-8 max-w-3xl leading-relaxed cms-rich-text">
   {!! props.html !!}
 </div>