@stacksjs/defaults 0.75.329 → 0.75.334

package/resources/components/Dashboard/Commerce/CommerceProductDialog.stx

@@ -150,7 +150,7 @@ function errorMessages(): string[] {
         </ul>
         <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span><input x-model="name" type="text" maxlength="100" required class="mt-1 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-md dark:border-neutral-700" /></label>
-          <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Slug</span><input x-model="slug" type="text" maxlength="255" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" @input="markSlugTouched" @blur="normalizeSlug" /><span class="block mt-1 text-gray-400 text-xs dark:text-neutral-500">The storefront address, /products/{{ slug() || 'slug' }}.</span></label>
+          <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Slug</span><input x-model="slug" type="text" maxlength="255" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" @input="markSlugTouched" @blur="normalizeSlug" /><span class="block mt-1 text-gray-500 text-xs dark:text-neutral-500">The storefront address, /products/{{ slug() || 'slug' }}.</span></label>
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span><textarea x-model="description" rows="3" class="mt-1 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-md dark:border-neutral-700"></textarea></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Price ({{ currency() }})</span><input x-model="price" type="number" min="0" :step="moneyInputStep(currency())" inputmode="decimal" required :aria-invalid="price() !== '' && priceError() !== ''" class="mt-1 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-md dark:border-neutral-700" /><span :if="price() !== '' && priceError()" class="block mt-1 text-red-600 text-xs dark:text-red-400">{{ priceError() }}</span></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Inventory count</span><input x-model="inventoryCount" type="number" min="0" step="1" required class="mt-1 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-md dark:border-neutral-700" /></label>

package/resources/components/Dashboard/Commerce/CommerceProductsTable.stx

@@ -85,13 +85,13 @@ function handleRowAction(payload: { action: string, row: CommerceProductRecord }
         <div class="flex flex-none items-center justify-center h-9 w-9 font-semibold text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md" x-text="row.initials"></div>
         <div class="min-w-0">
           <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.nameLabel"></p>
-          <p class="mt-1 max-w-52 text-gray-400 text-xs truncate dark:text-neutral-500" x-text="row.descriptionLabel"></p>
+          <p class="mt-1 max-w-52 text-gray-500 text-xs truncate dark:text-neutral-500" x-text="row.descriptionLabel"></p>
         </div>
       </div>
     </template>
     <template :if="column.key === 'inventoryCount'">
       <p :class="'font-medium text-sm ' + (row.outOfStock ? 'text-red-600 dark:text-red-400' : 'text-gray-700 dark:text-neutral-200')" x-text="row.inventoryLabel"></p>
-      <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500" x-text="row.prepLabel"></p>
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-500" x-text="row.prepLabel"></p>
     </template>
   </template>
 </Table>

package/resources/components/Dashboard/Commerce/CommerceReviewsTable.stx

@@ -111,7 +111,7 @@ function handleRowAction(payload: { action: string, row: ReviewRecord }): void {
       <div class="max-w-lg min-w-72">
         <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.titleLabel"></p>
         <p class="mt-1 line-clamp-2 text-gray-500 text-sm dark:text-neutral-400" x-text="row.contentLabel"></p>
-        <div class="flex flex-wrap gap-x-3 gap-y-1 items-center mt-2 text-gray-400 text-xs dark:text-neutral-500">
+        <div class="flex flex-wrap gap-x-3 gap-y-1 items-center mt-2 text-gray-500 text-xs dark:text-neutral-500">
           <span :aria-label="row.starsLabel" class="text-amber-500 text-sm" x-text="row.stars"></span>
           <span x-text="row.helpfulLabel"></span>
           <span x-text="row.unhelpfulLabel"></span>

package/resources/components/Dashboard/Commerce/CommerceVariantsTable.stx

@@ -74,7 +74,7 @@ function handleRowAction(payload: { action: string, row: ProductVariantRecord })
           <span class="px-2 py-0.5 text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full" x-text="option"></span>
         </template>
         <span :if="row.moreOptions" class="px-2 py-0.5 text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full" x-text="row.moreOptions"></span>
-        <span :if="row.shownOptions.length === 0" class="text-gray-400 text-xs">No options</span>
+        <span :if="row.shownOptions.length === 0" class="text-gray-500 text-xs dark:text-gray-400">No options</span>
       </div>
     </template>
   </template>

package/resources/components/Dashboard/Commerce/Delivery/DeliveryOverviewDashboard.stx

@@ -182,7 +182,7 @@ onMount(() => {
             <span :class="'h-5 w-5 text-blue-600 dark:text-blue-400 ' + statIcon(item.label)"></span>
           </div>
           <p class="mt-2 font-semibold tabular-nums text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
-          <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
+          <p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ item.detail }}</p>
         </article>
       </template>
     </section>

package/resources/components/Dashboard/Commerce/Delivery/DigitalDeliveryDialog.stx

@@ -93,8 +93,8 @@ function submit(): void {
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Method name</span><input x-model="name" type="text" required maxlength="255" autocomplete="off" placeholder="Secure download" class="mt-1 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-md dark:border-neutral-700" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span><textarea x-model="description" required rows="3" placeholder="Explain how customers receive and access files." class="mt-1 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-md dark:border-neutral-700 resize-y"></textarea></label>
           <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
-            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Download limit</span><input x-model="downloadLimit" type="number" min="0" step="1" inputmode="numeric" placeholder="Unlimited" class="mt-1 px-3 py-2 w-full tabular-nums text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /><span class="block mt-1 text-gray-400 text-xs dark:text-neutral-500">Leave blank for unlimited downloads.</span></label>
-            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Expiry days</span><input x-model="expiryDays" type="number" required min="0" step="1" inputmode="numeric" class="mt-1 px-3 py-2 w-full tabular-nums text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /><span class="block mt-1 text-gray-400 text-xs dark:text-neutral-500">Use 0 for access without expiry.</span></label>
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Download limit</span><input x-model="downloadLimit" type="number" min="0" step="1" inputmode="numeric" placeholder="Unlimited" class="mt-1 px-3 py-2 w-full tabular-nums text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /><span class="block mt-1 text-gray-500 text-xs dark:text-neutral-500">Leave blank for unlimited downloads.</span></label>
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Expiry days</span><input x-model="expiryDays" type="number" required min="0" step="1" inputmode="numeric" class="mt-1 px-3 py-2 w-full tabular-nums text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /><span class="block mt-1 text-gray-500 text-xs dark:text-neutral-500">Use 0 for access without expiry.</span></label>
           </div>
           <div class="grid gap-3 grid-cols-1 sm:grid-cols-2">
             <label class="flex gap-3 items-start p-3 border border-gray-200 rounded-lg dark:border-neutral-700"><input x-model="requiresLogin" type="checkbox" class="mt-0.5 h-4 w-4 text-blue-600 bg-white dark:bg-neutral-900 border-gray-300 rounded dark:border-neutral-600" /><span><strong class="block text-gray-900 text-sm dark:text-white">Require login</strong><span class="block mt-0.5 text-gray-500 text-xs dark:text-neutral-400">Only authenticated customers can download.</span></span></label>

package/resources/components/Dashboard/Commerce/PaymentDetailsDialog.stx

@@ -48,10 +48,10 @@ function refundable(): boolean {
   </template>
       <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2">
         <template :for="item in detailRows()" :key="item.label">
-          <div><dt class="text-gray-400 text-xs dark:text-neutral-500">{{ item.label }}</dt><dd class="mt-1 break-all text-gray-800 text-sm dark:text-neutral-100">{{ item.value }}</dd></div>
+          <div><dt class="text-gray-500 text-xs dark:text-neutral-500">{{ item.label }}</dt><dd class="mt-1 break-all text-gray-800 text-sm dark:text-neutral-100">{{ item.value }}</dd></div>
         </template>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Method</dt><dd class="mt-1 capitalize text-gray-800 text-sm dark:text-neutral-100">{{ label(record()?.method || '') }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Refund recorded</dt><dd class="mt-1 text-gray-800 text-sm dark:text-neutral-100">{{ record()?.refundAmount ? money(record()?.refundAmount || 0, record()?.currency || 'USD') : record()?.status === 'refunded' && !record()?.refundRecorded ? 'Amount missing' : money(0, record()?.currency || 'USD') }}</dd></div>
+        <div><dt class="text-gray-500 text-xs dark:text-neutral-500">Method</dt><dd class="mt-1 capitalize text-gray-800 text-sm dark:text-neutral-100">{{ label(record()?.method || '') }}</dd></div>
+        <div><dt class="text-gray-500 text-xs dark:text-neutral-500">Refund recorded</dt><dd class="mt-1 text-gray-800 text-sm dark:text-neutral-100">{{ record()?.refundAmount ? money(record()?.refundAmount || 0, record()?.currency || 'USD') : record()?.status === 'refunded' && !record()?.refundRecorded ? 'Amount missing' : money(0, record()?.currency || 'USD') }}</dd></div>
       </dl>
 
       <div :if="record()?.notes" class="mt-5 p-3 text-gray-600 text-sm dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">{{ record()?.notes }}</div>

package/resources/components/Dashboard/Commerce/PrintDeviceDetailsDialog.stx

@@ -49,12 +49,12 @@ function deleteRecord(): void {
     <span class="px-2 py-1 capitalize font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ label(record()?.status || '') }}</span>
   </template>
       <dl class="grid gap-4 grid-cols-2">
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Location</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.location || 'Not recorded' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Terminal</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.terminal || 'Not recorded' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Recorded prints</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ (record()?.printCount || 0).toLocaleString() }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Record ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.id || 'Not recorded' }}</dd></div>
-        <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Last heartbeat</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ formatDate(record()?.lastPing || 0) }}</dd></div>
-        <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Created</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ formatDate(record()?.createdAt || '') }}</dd></div>
+        <div><dt class="text-gray-500 text-xs dark:text-neutral-500">Location</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.location || 'Not recorded' }}</dd></div>
+        <div><dt class="text-gray-500 text-xs dark:text-neutral-500">Terminal</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.terminal || 'Not recorded' }}</dd></div>
+        <div><dt class="text-gray-500 text-xs dark:text-neutral-500">Recorded prints</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ (record()?.printCount || 0).toLocaleString() }}</dd></div>
+        <div><dt class="text-gray-500 text-xs dark:text-neutral-500">Record ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.id || 'Not recorded' }}</dd></div>
+        <div class="col-span-2"><dt class="text-gray-500 text-xs dark:text-neutral-500">Last heartbeat</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ formatDate(record()?.lastPing || 0) }}</dd></div>
+        <div class="col-span-2"><dt class="text-gray-500 text-xs dark:text-neutral-500">Created</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ formatDate(record()?.createdAt || '') }}</dd></div>
       </dl>
   <template #footer>
     <div class="flex gap-2 justify-between w-full">

package/resources/components/Dashboard/Commerce/PrintLogBreakdown.stx

@@ -67,7 +67,7 @@ function hourlyRows(): CountRow[] {
   </article>
 
   <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-    <div class="flex items-start justify-between"><h2 class="font-semibold text-gray-900 text-sm dark:text-white">Prints by hour</h2><span class="text-gray-400 text-xs dark:text-neutral-500">Local time</span></div>
+    <div class="flex items-start justify-between"><h2 class="font-semibold text-gray-900 text-sm dark:text-white">Prints by hour</h2><span class="text-gray-500 text-xs dark:text-neutral-500">Local time</span></div>
     <div class="mt-4 space-y-3">
       <template :for="item in hourlyRows()" :key="item.key">
         <div class="grid gap-3 grid-cols-[4rem_1fr_auto] items-center"><span class="text-gray-500 text-xs dark:text-neutral-400">{{ item.key }}</span><div class="h-1.5 bg-gray-100 dark:bg-neutral-700 rounded-full"><div :style="'width:' + item.percentage + '%'" class="h-1.5 bg-violet-500 rounded-full"></div></div><span class="text-gray-500 text-xs dark:text-neutral-400">{{ item.count }}</span></div>

package/resources/components/Dashboard/Commerce/PrintLogDetailsDialog.stx

@@ -39,7 +39,7 @@ function details(): Array<{ label: string, value: string }> {
   <template #header-trailing>
     <span class="px-2 py-1 capitalize font-medium text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status }}</span>
   </template>
-      <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2"><template :for="item in details()" :key="item.label"><div><dt class="text-gray-400 text-xs dark:text-neutral-500">{{ item.label }}</dt><dd class="mt-1 break-all text-gray-800 text-sm dark:text-neutral-100">{{ item.value }}</dd></div></template></dl>
-      <div :if="record()?.metadata && record()?.metadata !== '{}'" class="mt-5"><p class="text-gray-400 text-xs dark:text-neutral-500">Metadata</p><pre class="overflow-x-auto mt-1 p-3 text-gray-700 text-xs whitespace-pre-wrap dark:text-neutral-200 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">{{ record()?.metadata }}</pre></div>
+      <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2"><template :for="item in details()" :key="item.label"><div><dt class="text-gray-500 text-xs dark:text-neutral-500">{{ item.label }}</dt><dd class="mt-1 break-all text-gray-800 text-sm dark:text-neutral-100">{{ item.value }}</dd></div></template></dl>
+      <div :if="record()?.metadata && record()?.metadata !== '{}'" class="mt-5"><p class="text-gray-500 text-xs dark:text-neutral-500">Metadata</p><pre class="overflow-x-auto mt-1 p-3 text-gray-700 text-xs whitespace-pre-wrap dark:text-neutral-200 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">{{ record()?.metadata }}</pre></div>
   <template #footer><Button variant="secondary" @click="emit('close')">Close</Button></template>
 </Modal>

package/resources/components/Dashboard/Commerce/PrintLogsTable.stx

@@ -31,10 +31,10 @@ function statusClass(status: string): string {
       <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
         <template :for="record in records()" :key="record.id">
           <tr>
-            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.document || 'Untitled print job' }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Log #{{ record.id }}</p></td>
-            <td class="px-4 py-4"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.printer || 'Unknown printer' }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.printDeviceId ? 'Device #' + record.printDeviceId : 'No linked device' }}</p></td>
+            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.document || 'Untitled print job' }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Log #{{ record.id }}</p></td>
+            <td class="px-4 py-4"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.printer || 'Unknown printer' }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ record.printDeviceId ? 'Device #' + record.printDeviceId : 'No linked device' }}</p></td>
             <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(record.status)">{{ record.status || 'unknown' }}</span></td>
-            <td class="px-4 py-4"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.pages }} pages</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.sizeKb }} KB · {{ record.durationSeconds }}s</p></td>
+            <td class="px-4 py-4"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.pages }} pages</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ record.sizeKb }} KB · {{ record.durationSeconds }}s</p></td>
             <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ date(record.timestamp) }}</td>
             <td class="px-4 py-4"><div class="flex gap-1 justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'View print log ' + record.id" @click="emit('view', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-view"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete print log ' + record.id" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span></Button></div></td>
           </tr>

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

@@ -183,7 +183,7 @@ onMount(() => {
     <div class="divide-gray-200 divide-y dark:divide-neutral-700">
       <div :if="loading()" class="px-4 py-14 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading comments</div>
       <div :else-if="visibleComments().length === 0" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-comment-01"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No comments found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the search or status filter.</p></div>
-      <template :else><template :for="comment in visibleComments()"><article class="p-4"><div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between"><div class="min-w-0"><div class="flex flex-wrap gap-2 items-center"><p class="font-semibold text-gray-900 text-sm dark:text-white">{{ comment.authorName || 'Anonymous' }}</p><span :class="statusClass(comment.status)">{{ comment.status }}</span><span class="text-gray-400 text-xs">{{ formatDate(comment.createdAt) }}</span></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ comment.authorEmail }}<span :if="comment.postTitle"> on {{ comment.postTitle }}</span></p><p class="mt-3 max-w-4xl text-gray-700 text-sm whitespace-pre-wrap dark:text-neutral-200">{{ comment.content }}</p></div><div class="flex flex-shrink-0 flex-wrap gap-2"><Button :if="comment.status !== 'approved'" variant="success" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'approved')">Approve</Button><Button :if="comment.status !== 'pending'" variant="secondary" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'pending')">Restore</Button><Button :if="comment.status !== 'spam'" variant="warning" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'spam')">Spam</Button><Button :if="comment.status !== 'trash' && comment.source === 'comments'" variant="outline" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'trash')">Trash</Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Permanently delete comment by ' + comment.authorName" :disabled="Boolean(updatingId())" @click="openDelete(comment)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></div></article></template></template>
+      <template :else><template :for="comment in visibleComments()"><article class="p-4"><div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between"><div class="min-w-0"><div class="flex flex-wrap gap-2 items-center"><p class="font-semibold text-gray-900 text-sm dark:text-white">{{ comment.authorName || 'Anonymous' }}</p><span :class="statusClass(comment.status)">{{ comment.status }}</span><span class="text-gray-500 text-xs dark:text-gray-400">{{ formatDate(comment.createdAt) }}</span></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ comment.authorEmail }}<span :if="comment.postTitle"> on {{ comment.postTitle }}</span></p><p class="mt-3 max-w-4xl text-gray-700 text-sm whitespace-pre-wrap dark:text-neutral-200">{{ comment.content }}</p></div><div class="flex flex-shrink-0 flex-wrap gap-2"><Button :if="comment.status !== 'approved'" variant="success" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'approved')">Approve</Button><Button :if="comment.status !== 'pending'" variant="secondary" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'pending')">Restore</Button><Button :if="comment.status !== 'spam'" variant="warning" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'spam')">Spam</Button><Button :if="comment.status !== 'trash' && comment.source === 'comments'" variant="outline" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'trash')">Trash</Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Permanently delete comment by ' + comment.authorName" :disabled="Boolean(updatingId())" @click="openDelete(comment)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></div></article></template></template>
     </div>
   </section>
 </div>

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

@@ -50,7 +50,7 @@ function navRowClass(active: boolean): string {
 <div class="flex flex-col h-full">
   <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
     <label class="block">
-      <span class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Storage disk</span>
+      <span class="font-semibold text-[11px] text-stone-500 tracking-wider uppercase dark:text-neutral-500">Storage disk</span>
       <select x-model="disk" :disabled="busy()" class="mt-2 px-2.5 py-2 w-full text-sm text-stone-800 dark:text-white bg-white/80 dark:bg-neutral-800 border border-stone-200 rounded-lg dark:border-neutral-700 disabled:opacity-60" @change="emit('disk', $event.target.value)">
         <template :for="option in disks"><option :value="option.name">{{ option.name }}{{ option.public ? ' (public)' : '' }}</option></template>
       </select>
@@ -59,7 +59,7 @@ function navRowClass(active: boolean): string {
 
   <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
     <div class="flex items-center justify-between">
-      <p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Stored content</p>
+      <p class="font-semibold text-[11px] text-stone-500 tracking-wider uppercase dark:text-neutral-500">Stored content</p>
       <span class="font-mono text-[11px] text-stone-500 dark:text-neutral-400">{{ summary().contentSize }}</span>
     </div>
     <div class="grid gap-2 grid-cols-2 mt-3">
@@ -69,11 +69,11 @@ function navRowClass(active: boolean): string {
   </div>
 
   <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
-    <p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Content by type</p>
+    <p class="font-semibold text-[11px] text-stone-500 tracking-wider uppercase dark:text-neutral-500">Content by type</p>
     <div class="mt-3 space-y-3">
       <template :for="row in typeRows">
         <div>
-          <div class="flex items-center justify-between text-[11px]"><span class="text-stone-600 dark:text-neutral-300">{{ row.label }}</span><span class="font-mono text-stone-400 dark:text-neutral-500">{{ row.size }}</span></div>
+          <div class="flex items-center justify-between text-[11px]"><span class="text-stone-600 dark:text-neutral-300">{{ row.label }}</span><span class="font-mono text-stone-500 dark:text-neutral-500">{{ row.size }}</span></div>
           <div class="overflow-hidden mt-1 h-1.5 bg-black/[0.06] dark:bg-white/[0.08] rounded-full"><div :class="'h-full rounded-full ' + row.color" :style="row.barStyle"></div></div>
         </div>
       </template>
@@ -81,7 +81,7 @@ function navRowClass(active: boolean): string {
   </div>
 
   <div :if="summary().capacityKnown" class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
-    <div class="flex items-center justify-between"><p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Volume capacity</p><span class="font-mono text-[11px] text-stone-500 dark:text-neutral-400">{{ summary().capacityPercent.toFixed(0) }}%</span></div>
+    <div class="flex items-center justify-between"><p class="font-semibold text-[11px] text-stone-500 tracking-wider uppercase dark:text-neutral-500">Volume capacity</p><span class="font-mono text-[11px] text-stone-500 dark:text-neutral-400">{{ summary().capacityPercent.toFixed(0) }}%</span></div>
     <div class="overflow-hidden mt-2 h-1.5 bg-black/[0.06] dark:bg-white/[0.08] rounded-full"><div class="h-full bg-blue-500 rounded-full" :style="'width: ' + summary().capacityPercent.toFixed(2) + '%'"></div></div>
     <p class="mt-2 text-[11px] text-stone-500 dark:text-neutral-400">{{ summary().available }} available of {{ summary().total }}</p>
   </div>
@@ -89,7 +89,7 @@ function navRowClass(active: boolean): string {
   <nav aria-label="Storage folders" class="overflow-y-auto flex-1 p-2">
     <button type="button" :class="navRowClass(currentPath() === '')" @click="emit('navigate', '')"><span class="h-[18px] w-[18px] text-blue-500 i-hugeicons-home-02"></span>Home</button>
     <template :for="folder in folders">
-      <button type="button" :class="navRowClass(currentPath() === folder.path)" @click="emit('navigate', folder.path)"><span class="h-[18px] w-[18px] text-amber-500 i-hugeicons-folder-02"></span><span class="truncate">{{ folder.name }}</span><span class="ml-auto tabular-nums text-[11px] text-stone-400 dark:text-neutral-500">{{ folder.count }}</span></button>
+      <button type="button" :class="navRowClass(currentPath() === folder.path)" @click="emit('navigate', folder.path)"><span class="h-[18px] w-[18px] text-amber-500 i-hugeicons-folder-02"></span><span class="truncate">{{ folder.name }}</span><span class="ml-auto tabular-nums text-[11px] text-stone-500 dark:text-neutral-500">{{ folder.count }}</span></button>
     </template>
   </nav>
 

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

@@ -73,7 +73,7 @@ function submit(): void {
     </label>
     <ul :if="files().length" class="overflow-y-auto mt-4 space-y-1 max-h-32 text-sm">
       <template :for="file in files">
-        <li class="flex gap-4 items-center justify-between px-3 py-2 bg-stone-50 dark:bg-neutral-900 rounded-lg"><span class="text-stone-700 truncate dark:text-neutral-200">{{ file.name }}</span><span class="flex-shrink-0 font-mono text-stone-400 text-xs dark:text-neutral-500">{{ formatFileSize(file.size) }}</span></li>
+        <li class="flex gap-4 items-center justify-between px-3 py-2 bg-stone-50 dark:bg-neutral-900 rounded-lg"><span class="text-stone-700 truncate dark:text-neutral-200">{{ file.name }}</span><span class="flex-shrink-0 font-mono text-stone-500 text-xs dark:text-neutral-500">{{ formatFileSize(file.size) }}</span></li>
       </template>
     </ul>
   </form>

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

@@ -136,12 +136,12 @@ function submit(): void {
     <label>
       <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Excerpt</span>
       <textarea x-model="excerpt" name="excerpt" rows="3" maxlength="500" placeholder="Optional, at least 10 characters when provided" class="mt-1 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-md dark:border-neutral-700"></textarea>
-      <span class="block mt-1 text-gray-400 text-xs">{{ excerpt().length }}/500</span>
+      <span class="block mt-1 text-gray-500 text-xs dark:text-gray-400">{{ excerpt().length }}/500</span>
     </label>
     <label>
       <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Content</span>
       <textarea x-model="content" name="content" required minlength="10" maxlength="100000" rows="10" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea>
-      <span class="block mt-1 text-gray-400 text-xs">{{ content().length }}/100000</span>
+      <span class="block mt-1 text-gray-500 text-xs dark:text-gray-400">{{ content().length }}/100000</span>
     </label>
     <div class="grid gap-4 lg:grid-cols-2">
       <fieldset class="p-4 border border-gray-200 rounded-lg dark:border-neutral-700">

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

@@ -293,7 +293,7 @@ onMount(() => { void loadPosts() })
             <span :if="row.featured" x-tooltip="Featured" title="Featured" class="flex-shrink-0 h-4 w-4 text-amber-500 i-hugeicons-star"></span>
           </div>
           <p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400" x-text="row.summaryLabel"></p>
-          <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500" x-text="row.authorLabel"></p>
+          <p class="mt-1 text-gray-500 text-xs dark:text-neutral-500" x-text="row.authorLabel"></p>
         </template>
         <template :else>
           <p class="text-gray-500 text-xs truncate dark:text-neutral-400"><span class="font-medium text-gray-700 dark:text-neutral-200">Categories:</span> <span x-text="row.categoriesLabel"></span></p>

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

@@ -70,7 +70,7 @@ function submit(): void {
     <div>
       <div class="flex items-center justify-between">
         <label for="seo-meta-description" class="block font-medium text-neutral-700 text-sm dark:text-neutral-300">Meta description</label>
-        <span class="tabular-nums text-neutral-400 text-xs">{{ metaDescription().length }}/160</span>
+        <span class="tabular-nums text-neutral-500 text-xs dark:text-neutral-400">{{ metaDescription().length }}/160</span>
       </div>
       <textarea
         id="seo-meta-description"

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

@@ -81,7 +81,7 @@ function icon(operation: DeploymentPreviewOperation): string {
             </div>
             <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>
+                <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ index + 1 }}</span>
                 <h5 class="font-semibold text-neutral-900 text-sm dark:text-white">{{ operation.label }}</h5>
               </div>
               <p class="mt-1 text-neutral-600 text-sm dark:text-neutral-300">{{ operation.detail }}</p>

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

@@ -221,7 +221,7 @@ function another() {
           </label>
 
           <label class="block mb-4">
-            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Details <span class="font-normal text-neutral-400">(optional)</span></span>
+            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Details <span class="font-normal text-neutral-500 dark:text-neutral-400">(optional)</span></span>
             <textarea
               x-model="description"
               rows="6"
@@ -233,7 +233,7 @@ function another() {
           </label>
 
           <div class="mb-5">
-            <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>
+            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Screenshot <span class="font-normal text-neutral-500 dark: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="object-cover h-14 w-14 bg-white dark:bg-neutral-900 border border-neutral-200 rounded dark:border-neutral-700" />
@@ -246,7 +246,7 @@ function another() {
             <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>
+              <span class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">PNG, JPEG, WebP or GIF, up to {{ megabytes(sizeLimit()) }}</span>
               <input
                 ref="feedbackScreenshotInput"
                 type="file"
@@ -269,7 +269,7 @@ function another() {
           </button>
         </form>
 
-        <p class="mt-4 text-center text-neutral-400 text-xs dark:text-neutral-500">
+        <p class="mt-4 text-center text-neutral-500 text-xs dark:text-neutral-500">
           This link lets you send feedback. It does not sign you in, and it cannot read anything back.
         </p>
       </div>

package/resources/components/Dashboard/FileViewer/MediaCard.stx

@@ -97,6 +97,6 @@ const badgeClass = derived(() => kind() === 'video'
   </div>
   <div class="px-3 py-2.5">
     <p :title="currentItem().name" class="font-medium text-[13px] text-stone-800 truncate dark:text-white">{{ currentItem().name }}</p>
-    <p class="mt-0.5 capitalize text-[11px] text-stone-400 dark:text-neutral-500">{{ currentItem().type === 'folder' ? 'Folder' : kind() }}</p>
+    <p class="mt-0.5 capitalize text-[11px] text-stone-500 dark:text-neutral-500">{{ currentItem().type === 'folder' ? 'Folder' : kind() }}</p>
   </div>
 </div>

package/resources/components/Dashboard/FileViewer/MediaInfoPanel.stx

@@ -90,10 +90,10 @@ const kindLabel = derived(() => currentItem().type === 'folder' ? 'Folder' : `${
   </div>
   <h4 class="mt-4 break-words font-semibold text-[15px] text-stone-800 dark:text-white">{{ currentItem().name }}</h4>
   <dl class="mt-4 space-y-3 text-[13px]">
-    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Type</dt><dd class="capitalize font-medium text-right text-stone-700 dark:text-neutral-200">{{ kindLabel() }}</dd></div>
-    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Size</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ sizeLabel() }}</dd></div>
-    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Location</dt><dd class="break-all font-medium text-right text-stone-700 dark:text-neutral-200">{{ locationLabel() }}</dd></div>
-    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Modified</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ formatWhen(currentItem().lastModified) }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-500 dark:text-neutral-500">Type</dt><dd class="capitalize font-medium text-right text-stone-700 dark:text-neutral-200">{{ kindLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-500 dark:text-neutral-500">Size</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ sizeLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-500 dark:text-neutral-500">Location</dt><dd class="break-all font-medium text-right text-stone-700 dark:text-neutral-200">{{ locationLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-500 dark:text-neutral-500">Modified</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ formatWhen(currentItem().lastModified) }}</dd></div>
   </dl>
   <span :if="currentItem().shared" class="inline-flex gap-1 items-center self-start mt-5 px-2 py-1 font-medium text-[11px] text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-500/15 rounded-full"><span class="h-3 w-3 i-hugeicons-share-01"></span>Public disk</span>
 </div>

package/resources/components/Dashboard/GlobalSearch.stx

@@ -152,7 +152,7 @@ onDestroy(() => {
         @input="scheduleSearch($event.target.value)"
       />
       <span :if="isSearching()" class="shrink-0 h-5 w-5 text-blue-500 animate-spin i-hugeicons-loading-03"></span>
-      <kbd :if="!isSearching()" class="shrink-0 px-1.5 py-0.5 font-medium text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
+      <kbd :if="!isSearching()" class="shrink-0 px-1.5 py-0.5 font-medium text-[10px] text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
         ESC
       </kbd>
     </div>
@@ -170,7 +170,7 @@ onDestroy(() => {
       <template :if="!error() && Object.keys(results()).length > 0">
         <template :for="group in resultGroups()">
           <div class="pb-1 pt-3 px-3">
-            <h3 class="px-1 font-semibold text-neutral-400 text-xs tracking-wider uppercase">
+            <h3 class="px-1 font-semibold text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">
               {{ group.type }}
             </h3>
           </div>
@@ -203,11 +203,11 @@ onDestroy(() => {
       </div>
 
       <div :if="!error() && !query().trim() && !isSearching()" class="px-4 py-8 text-center">
-        <p class="text-neutral-400 text-sm">Search fields declared by each model's useSearch trait.</p>
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Search fields declared by each model's useSearch trait.</p>
       </div>
     </div>
 
-    <div class="flex gap-4 items-center px-4 py-2.5 text-neutral-400 text-xs border-neutral-200 border-t dark:border-neutral-700">
+    <div class="flex gap-4 items-center px-4 py-2.5 text-neutral-500 text-xs dark:text-neutral-400 border-neutral-200 border-t dark:border-neutral-700">
       <span class="flex gap-1 items-center">
         <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">↑↓</kbd>
         Navigate

package/resources/components/Dashboard/Infrastructure/CloudDashboard.stx

@@ -243,7 +243,7 @@ onMount(() => {
     </div>
   </section>
 
-  <footer :if="snapshot()?.generatedAt" class="text-neutral-400 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(snapshot()?.generatedAt || null) }}</footer>
+  <footer :if="snapshot()?.generatedAt" class="text-neutral-500 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(snapshot()?.generatedAt || null) }}</footer>
 
   <CloudDetailsDialog :open="Boolean(selectedResource())" :item="selectedResource()" @close="closeResource" />
 </div>

package/resources/components/Dashboard/Infrastructure/DnsDashboard.stx

@@ -254,7 +254,7 @@ onMount(() => {
   <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
     <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
       <div><h2 class="font-semibold text-neutral-900 dark:text-white">Nameservers</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured delegation targets.</p></div>
-      <span class="font-mono text-neutral-400 text-xs">{{ nameservers().length }}</span>
+      <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ nameservers().length }}</span>
     </header>
     <div :if="nameservers().length > 0" class="grid gap-3 sm:grid-cols-2 p-5">
       <div :for="nameserver in nameservers()" class="flex gap-3 items-center p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg">
@@ -263,7 +263,7 @@ onMount(() => {
       </div>
     </div>
     <p :if="nameservers().length === 0" class="p-5 text-neutral-500 text-sm dark:text-neutral-400">No nameservers configured.</p>
-    <p :if="generatedAt()" class="px-5 py-3 text-neutral-400 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
+    <p :if="generatedAt()" class="px-5 py-3 text-neutral-500 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
   </section>
 
   <DnsRecordDialog :open="Boolean(selectedRecord())" :record="selectedRecord()" @close="closeRecord" />

package/resources/components/Dashboard/Infrastructure/LogsDashboard.stx

@@ -266,7 +266,7 @@ onDestroy(() => {
     <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
         <div><h2 class="font-semibold text-neutral-900 dark:text-white">Query logs</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Search message, project, file, and stack trace.</p></div>
-        <p :if="generatedAt()" class="text-neutral-400 text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</p>
+        <p :if="generatedAt()" class="text-neutral-500 text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</p>
       </div>
       <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3 mt-5">
         <label class="block relative sm:col-span-2 xl:col-span-1">
@@ -296,7 +296,7 @@ onDestroy(() => {
             <td class="px-5 py-4 text-neutral-500 whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.timestamp) }}</td>
             <td class="px-5 py-4"><LogLevelBadge :type="record.type" /></td>
             <td class="px-5 py-4 font-mono text-neutral-700 text-xs dark:text-neutral-300">{{ record.source || 'Not recorded' }}</td>
-            <td class="px-5 py-4 max-w-md"><p class="font-medium text-neutral-900 dark:text-white">{{ record.message }}</p><p :if="record.file" class="mt-1 font-mono text-neutral-400 text-xs truncate dark:text-neutral-500">{{ record.file }}</p></td>
+            <td class="px-5 py-4 max-w-md"><p class="font-medium text-neutral-900 dark:text-white">{{ record.message }}</p><p :if="record.file" class="mt-1 font-mono text-neutral-500 text-xs truncate dark:text-neutral-500">{{ record.file }}</p></td>
             <td class="px-5 py-4 text-neutral-600 whitespace-nowrap dark:text-neutral-300">{{ record.project || 'Not recorded' }}</td>
             <td class="px-5 py-4 text-right"><Button variant="ghost" iconOnly :ariaLabel="'Inspect log ' + record.id" @click="openLog(record)"><span class="block h-5 w-5 i-hugeicons-view"></span></Button></td>
           </tr>

package/resources/components/Dashboard/Infrastructure/MailboxesDashboard.stx

@@ -217,7 +217,7 @@ onMount(() => {
 
   <section class="grid gap-4 grid-cols-1 xl:grid-cols-2">
     <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700"><div><h2 class="font-semibold text-neutral-900 dark:text-white">Forwarding</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured address copies.</p></div><span class="font-mono text-neutral-400 text-xs">{{ forwards().length }}</span></header>
+      <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700"><div><h2 class="font-semibold text-neutral-900 dark:text-white">Forwarding</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured address copies.</p></div><span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ forwards().length }}</span></header>
       <div :if="forwards().length > 0" class="divide-neutral-100 divide-y dark:divide-neutral-800">
         <div :for="forward in forwards()" class="px-5 py-4">
           <p class="font-medium font-mono text-neutral-900 text-sm dark:text-white">{{ forward.source }}</p>
@@ -228,12 +228,12 @@ onMount(() => {
     </div>
 
     <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700"><div><h2 class="font-semibold text-neutral-900 dark:text-white">Retention</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured mail storage policy.</p></div><span class="font-mono text-neutral-400 text-xs">{{ server().storage.length }}</span></header>
+      <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700"><div><h2 class="font-semibold text-neutral-900 dark:text-white">Retention</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured mail storage policy.</p></div><span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ server().storage.length }}</span></header>
       <dl :if="server().storage.length > 0" class="grid gap-4 sm:grid-cols-2 p-5 text-sm">
         <div :for="item in server().storage"><dt class="capitalize text-neutral-500 dark:text-neutral-400">{{ storageLabel(item) }}</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ item.value }}</dd></div>
       </dl>
       <p :if="server().storage.length === 0" class="p-5 text-neutral-500 text-sm dark:text-neutral-400">No storage policy configured.</p>
-      <p :if="generatedAt()" class="px-5 py-3 text-neutral-400 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
+      <p :if="generatedAt()" class="px-5 py-3 text-neutral-500 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
     </div>
   </section>
 

package/resources/components/Dashboard/Infrastructure/ServerlessDashboard.stx

@@ -240,7 +240,7 @@ onMount(() => {
     </div>
   </section>
 
-  <footer :if="generatedAt()" class="text-neutral-400 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</footer>
+  <footer :if="generatedAt()" class="text-neutral-500 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</footer>
 
   <CloudDetailsDialog :open="Boolean(selectedResource())" :item="selectedResource()" @close="closeResource" />
 </div>

package/resources/components/Dashboard/Infrastructure/ServersDashboard.stx

@@ -268,7 +268,7 @@ onMount(() => {
         <h2 class="font-semibold text-neutral-900 dark:text-white">Configured request path</h2>
         <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">A structural view of declared routing, with no inferred health data.</p>
       </div>
-      <p class="text-neutral-400 text-xs dark:text-neutral-500">Source: config/cloud.ts</p>
+      <p class="text-neutral-500 text-xs dark:text-neutral-500">Source: config/cloud.ts</p>
     </div>
     <div class="grid gap-3 grid-cols-1 md:grid-cols-[1fr_auto_1fr_auto_1fr] mt-5">
       <div class="flex gap-3 items-center p-4 bg-rose-50 dark:bg-rose-950/25 border border-rose-100 rounded-xl dark:border-rose-900/50">
@@ -312,7 +312,7 @@ onMount(() => {
       <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
         <div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
           <div><h3 class="font-semibold text-neutral-900 text-sm dark:text-white">Definitions</h3><p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Desired compute configuration</p></div>
-          <span class="font-mono text-neutral-400 text-xs">{{ filteredServers().length }}</span>
+          <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ filteredServers().length }}</span>
         </div>
         <div class="divide-neutral-100 divide-y dark:divide-neutral-800">
           <button :for="server in filteredServers()" type="button" class="flex gap-4 items-center px-5 py-4 w-full text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/70" @click="inspectServer(server)">
@@ -327,7 +327,7 @@ onMount(() => {
       <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
         <div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
           <div><h3 class="font-semibold text-neutral-900 text-sm dark:text-white">Deployments</h3><p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Persisted provider state</p></div>
-          <span class="font-mono text-neutral-400 text-xs">{{ filteredDeployments().length }}</span>
+          <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ filteredDeployments().length }}</span>
         </div>
         <div class="divide-neutral-100 divide-y dark:divide-neutral-800">
           <button :for="deployment in filteredDeployments()" type="button" class="flex gap-4 items-center px-5 py-4 w-full text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/70" @click="inspectDeployment(deployment)">
@@ -352,7 +352,7 @@ onMount(() => {
         <article :for="event in events()" class="flex gap-3 px-5 py-4">
           <span :class="'mt-0.5 h-5 w-5 shrink-0 ' + eventIcon(event)"></span>
           <div class="flex-1 min-w-0"><p class="font-medium text-neutral-900 text-sm dark:text-white">{{ event.service }}</p><p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ event.message }}</p></div>
-          <time class="shrink-0 text-neutral-400 text-xs dark:text-neutral-500">{{ formatDate(event.timestamp) }}</time>
+          <time class="shrink-0 text-neutral-500 text-xs dark:text-neutral-500">{{ formatDate(event.timestamp) }}</time>
         </article>
       </div>
     </div>
@@ -366,7 +366,7 @@ onMount(() => {
         </div>
         <p :if="environments().length === 0" class="text-neutral-500 text-sm dark:text-neutral-400">No environments configured.</p>
       </div>
-      <p :if="generatedAt()" class="mt-5 pt-4 text-neutral-400 text-xs dark:text-neutral-500 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
+      <p :if="generatedAt()" class="mt-5 pt-4 text-neutral-500 text-xs dark:text-neutral-500 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
     </div>
   </section>
 

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

@@ -376,7 +376,7 @@
         <div>
           <h1 class="font-semibold text-2xl text-zinc-900 dark:text-zinc-100" :text="board.name"></h1>
           <p :if="board.description" class="mt-1 text-sm text-zinc-500" :text="board.description"></p>
-          <p class="mt-2 text-xs text-zinc-400">
+          <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
             <span :text="columns.length + ' columns'"></span>
             <span> · </span>
             <span :text="totalCards() + ' cards'"></span>

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

@@ -200,7 +200,7 @@
               class="mt-1 line-clamp-2 text-xs text-zinc-500"
               :text="board.description"
             ></p>
-            <p class="mt-3 text-xs text-zinc-400" :text="cardCountText(board.cardCount)"></p>
+            <p class="mt-3 text-xs text-zinc-500 dark:text-zinc-400" :text="cardCountText(board.cardCount)"></p>
           </div>
         </StxLink>
         <span class="absolute right-3 top-4 opacity-0 focus-within:opacity-100 group-hover:opacity-100 transition-opacity">
@@ -232,7 +232,7 @@
         </div>
 
         <div>
-          <label for="kanban-board-description" class="block mb-1 font-medium text-xs text-zinc-700 dark:text-zinc-300">Description <span class="text-zinc-400">(optional)</span></label>
+          <label for="kanban-board-description" class="block mb-1 font-medium text-xs text-zinc-700 dark:text-zinc-300">Description <span class="text-zinc-500 dark:text-zinc-400">(optional)</span></label>
           <textarea
             id="kanban-board-description"
             x-model="draftDescription"