@stacksjs/defaults 0.75.127 → 0.75.129

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>