@stacksjs/defaults 0.75.328 → 0.75.330

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/AuthorsDashboard.stx

@@ -193,7 +193,7 @@ onMount(() => {
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 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 variant="secondary" size="sm" @click="loadAuthors()">Retry</Button></div>
 
-  <section aria-label="Author metrics" class="grid gap-3 sm:grid-cols-3">
+  <section aria-label="Author metrics" class="grid gap-3 grid-cols-1 sm:grid-cols-3">
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ authors().length }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Assigned posts</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ assignedPostCount() }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Newest</p><p class="mt-2 font-semibold text-gray-900 text-lg truncate dark:text-white">{{ authors()[0]?.name || 'None' }}</p></article>

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/ContentTaxonomyDashboard.stx

@@ -206,7 +206,7 @@ onMount(() => {
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 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 variant="secondary" size="sm" @click="loadRecords()">Retry</Button></div>
 
-  <section :aria-label="title() + ' metrics'" class="grid gap-3 sm:grid-cols-3">
+  <section :aria-label="title() + ' metrics'" class="grid gap-3 grid-cols-1 sm:grid-cols-3">
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ records().length }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">{{ secondaryMetricLabel() }}</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ secondaryMetric() }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Newest</p><p class="mt-2 font-semibold text-gray-900 text-lg truncate dark:text-white">{{ records()[0]?.name || 'None' }}</p></article>

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

@@ -77,7 +77,11 @@ const searchQuery = state('')
 const sortBy = state<'name' | 'lastModified' | 'size'>('name')
 const sortOrder = state<'asc' | 'desc'>('asc')
 const viewMode = state<'grid' | 'list'>('grid')
-const showSidePanel = state(true)
+// A wide screen shows the storage panel beside the files; a narrow one has
+// no room for it, so the same panel opens in a drawer instead.
+const sidePanelOpen = state(true)
+const storageDrawerOpen = state(false)
+const isWideScreen = useMediaQuery('(min-width: 1024px)')
 const loading = state(true)
 const loadError = state('')
 const truncated = state(false)
@@ -165,7 +169,7 @@ const typeRows = derived(() => [
   { key: 'videos', label: 'Videos', bytes: stats().byType.videos, color: 'bg-amber-500' },
   { key: 'audio', label: 'Audio', bytes: stats().byType.audio, color: 'bg-emerald-500' },
   { key: 'other', label: 'Other', bytes: stats().byType.other, color: 'bg-stone-400 dark:bg-neutral-500' },
-])
+].map(row => ({ key: row.key, label: row.label, color: row.color, size: formatFileSize(row.bytes), barStyle: typeBarStyle(row.bytes) })))
 
 const volumePercent = derived(() => {
   const total = stats().disk.totalBytes
@@ -173,9 +177,31 @@ const volumePercent = derived(() => {
   return total && used !== null ? Math.min(100, Math.max(0, used / total * 100)) : 0
 })
 const capacityKnown = derived(() => stats().disk.totalBytes !== null && stats().disk.availableBytes !== null)
+const storageSummary = derived(() => ({
+  files: stats().files,
+  folders: stats().folders,
+  contentSize: formatFileSize(stats().contentBytes),
+  capacityKnown: capacityKnown(),
+  capacityPercent: volumePercent(),
+  available: formatFileSize(stats().disk.availableBytes),
+  total: formatFileSize(stats().disk.totalBytes),
+}))
+const storageFolders = derived(() => topLevelFolders().map(folder => ({ path: folder.path, name: folder.name, count: (folder.items || []).length })))
 const currentFolderLabel = derived(() => currentFolderPath() || 'Storage root')
 const emptyHint = derived(() => searchQuery() ? 'No items match your search.' : 'This folder is empty.')
-const sidePanelClass = derived(() => `border-r border-black/[0.06] dark:border-white/[0.08] bg-[#F5F3EE]/70 dark:bg-neutral-900/40 backdrop-blur-2xl transition-all duration-300 ${showSidePanel() ? 'w-64' : 'w-0 overflow-hidden'}`)
+
+function toggleSidePanel(): void {
+  if (isWideScreen())
+    sidePanelOpen.set(!sidePanelOpen())
+  else
+    storageDrawerOpen.set(true)
+}
+
+effect(() => {
+  if (isWideScreen() && storageDrawerOpen())
+    storageDrawerOpen.set(false)
+})
+
 const segmentBase = 'inline-flex items-center px-2.5 py-1.5 rounded-md text-sm font-medium transition-colors'
 const segmentActive = 'bg-white dark:bg-neutral-700 text-stone-800 dark:text-white shadow-sm'
 const segmentInactive = 'text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200'
@@ -183,13 +209,6 @@ const gridViewClass = derived(() => `${segmentBase} ${viewMode() === 'grid' ? se
 const listViewClass = derived(() => `${segmentBase} ${viewMode() === 'list' ? segmentActive : segmentInactive}`)
 const sortOrderIconClass = derived(() => `${sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02'} h-5 w-5`)
 
-function navRowClass(active: boolean): string {
-  const base = 'group flex items-center gap-2.5 px-2.5 py-1.5 w-full text-left font-medium text-[13px] rounded-lg transition-colors'
-  return active
-    ? `${base} bg-black/[0.06] dark:bg-white/[0.09] text-stone-900 dark:text-white`
-    : `${base} text-stone-600 dark:text-neutral-300 hover:bg-black/[0.04] dark:hover:bg-white/[0.06]`
-}
-
 function gridCardClass(item: FileItem): string {
   const selected = selectedItem()?.id === item.id
   return `group relative overflow-hidden bg-white dark:bg-neutral-800 border rounded-lg shadow-sm hover:shadow-md transition-all cursor-pointer ${selected ? 'border-blue-400 ring-2 ring-blue-500/20' : 'border-gray-200 dark:border-neutral-700 hover:border-blue-300 dark:hover:border-blue-700'}`
@@ -275,6 +294,22 @@ function navigateToFolder(folder: FileItem): void {
   selectedItem.set(null)
 }
 
+function openStorageFolder(path: string): void {
+  currentFolderPath.set(path)
+  selectedItem.set(null)
+  storageDrawerOpen.set(false)
+}
+
+function selectStorageDisk(name: string): void {
+  selectedDisk.set(name)
+  changeDisk()
+}
+
+function uploadFromStoragePanel(): void {
+  storageDrawerOpen.set(false)
+  openUpload()
+}
+
 function onItemClick(item: FileItem): void {
   if (item.type === 'folder')
     navigateToFolder(item)
@@ -409,56 +444,9 @@ onMount(() => { void loadFiles() })
 </script>
 
 <div class="flex min-h-[calc(100dvh-3rem)] bg-white dark:bg-neutral-900">
-  <aside :class="sidePanelClass()">
-    <div class="flex flex-col h-full min-h-[calc(100dvh-3rem)] w-64">
-      <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>
-          <select x-model="selectedDisk" :disabled="loading()" 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="changeDisk()">
-            <template :for="disk in disks"><option :value="disk.name">{{ disk.name }}{{ disk.public ? ' (public)' : '' }}</option></template>
-          </select>
-        </label>
-      </div>
-
-      <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>
-          <span class="font-mono text-[11px] text-stone-500 dark:text-neutral-400">{{ formatFileSize(stats().contentBytes) }}</span>
-        </div>
-        <div class="grid gap-2 grid-cols-2 mt-3">
-          <div class="p-2.5 bg-white/65 dark:bg-white/[0.05] rounded-lg"><p class="font-semibold text-lg text-stone-900 dark:text-white">{{ stats().files }}</p><p class="text-[11px] text-stone-500 dark:text-neutral-400">Files</p></div>
-          <div class="p-2.5 bg-white/65 dark:bg-white/[0.05] rounded-lg"><p class="font-semibold text-lg text-stone-900 dark:text-white">{{ stats().folders }}</p><p class="text-[11px] text-stone-500 dark:text-neutral-400">Folders</p></div>
-        </div>
-      </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>
-        <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">{{ formatFileSize(row.bytes) }}</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="typeBarStyle(row.bytes)"></div></div>
-            </div>
-          </template>
-        </div>
-      </div>
-
-      <div :if="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">{{ volumePercent().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: ' + volumePercent().toFixed(2) + '%'"></div></div>
-        <p class="mt-2 text-[11px] text-stone-500 dark:text-neutral-400">{{ formatFileSize(stats().disk.availableBytes) }} available of {{ formatFileSize(stats().disk.totalBytes) }}</p>
-      </div>
-
-      <nav aria-label="Storage folders" class="overflow-y-auto flex-1 p-2">
-        <button type="button" :class="navRowClass(currentFolderPath() === '')" @click="currentFolderPath.set('')"><span class="h-[18px] w-[18px] text-blue-500 i-hugeicons-home-02"></span>Home</button>
-        <template :for="folder in topLevelFolders">
-          <button type="button" :class="navRowClass(currentFolderPath() === folder.path)" @click="navigateToFolder(folder)"><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.items || []).length }}</span></button>
-        </template>
-      </nav>
-
-      <div class="p-3 border-black/[0.06] border-t dark:border-white/[0.08]">
-        <Button :disabled="loading()" fullWidth @click="openUpload()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-upload-01"></span>Upload files</Button>
-      </div>
+  <aside class="hidden lg:block shrink-0 bg-[#F5F3EE]/70 dark:bg-neutral-900/40 border-black/[0.06] border-r dark:border-white/[0.08] backdrop-blur-2xl duration-300 transition-all" :class="sidePanelOpen() ? 'w-64' : 'w-0 overflow-hidden'">
+    <div class="h-full min-h-[calc(100dvh-3rem)] w-64">
+      <FileStoragePanel :disks="disks()" :disk="selectedDisk()" :busy="loading()" :summary="storageSummary()" :type-rows="typeRows()" :folders="storageFolders()" :current-path="currentFolderPath()" @disk="selectStorageDisk" @navigate="openStorageFolder" @upload="uploadFromStoragePanel()" />
     </div>
   </aside>
 
@@ -466,7 +454,7 @@ onMount(() => { void loadFiles() })
     <header class="sticky top-0 z-10 p-4 bg-white/85 dark:bg-neutral-900/85 border-b border-black/[0.06] dark:border-white/[0.08] backdrop-blur-xl">
       <div class="flex flex-wrap gap-3 items-center justify-between">
         <div class="flex items-center min-w-0">
-          <Button variant="ghost" iconOnly ariaLabel="Toggle storage sidebar" @click="showSidePanel.set(!showSidePanel())"><span class="block h-5 w-5 i-hugeicons-menu-01"></span></Button>
+          <Button variant="ghost" iconOnly ariaLabel="Toggle storage sidebar" @click="toggleSidePanel()"><span class="block h-5 w-5 i-hugeicons-menu-01"></span></Button>
           <div class="ml-3 min-w-0"><p class="font-semibold text-stone-900 truncate dark:text-white">{{ currentFolderLabel }}</p><p class="mt-0.5 text-stone-500 text-xs dark:text-neutral-400">{{ selectedDisk }} disk</p></div>
         </div>
         <div class="flex flex-wrap gap-2 items-center">
@@ -541,6 +529,10 @@ onMount(() => { void loadFiles() })
   </div>
 </div>
 
+<Drawer :isOpen="storageDrawerOpen()" title="Storage" :description="selectedDisk() + ' disk'" size="sm" @close="storageDrawerOpen.set(false)">
+  <FileStoragePanel :disks="disks()" :disk="selectedDisk()" :busy="loading()" :summary="storageSummary()" :type-rows="typeRows()" :folders="storageFolders()" :current-path="currentFolderPath()" @disk="selectStorageDisk" @navigate="openStorageFolder" @upload="uploadFromStoragePanel()" />
+</Drawer>
+
 <FileDetailsDrawer :item="selectedItem()" :disk="selectedDisk()" @close="selectedItem.set(null)" />
 
 <CreateFolderDialog

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

@@ -0,0 +1,99 @@
+<script client>
+interface StorageDisk {
+  name: string
+  public: boolean
+}
+
+interface StorageSummary {
+  files: number
+  folders: number
+  contentSize: string
+  capacityKnown: boolean
+  capacityPercent: number
+  available: string
+  total: string
+}
+
+interface StorageTypeRow {
+  key: string
+  label: string
+  size: string
+  color: string
+  barStyle: string
+}
+
+interface StorageFolder {
+  path: string
+  name: string
+  count: number
+}
+
+const emptySummary: StorageSummary = { files: 0, folders: 0, contentSize: '0 Bytes', capacityKnown: false, capacityPercent: 0, available: '', total: '' }
+
+const disks = useReactiveProp('disks', [] as StorageDisk[])
+const disk = useReactiveProp('disk', '')
+const busy = useReactiveProp('busy', false)
+const summary = useReactiveProp('summary', emptySummary)
+const typeRows = useReactiveProp('typeRows', [] as StorageTypeRow[])
+const folders = useReactiveProp('folders', [] as StorageFolder[])
+const currentPath = useReactiveProp('currentPath', '')
+const emit = defineEmits(['disk', 'navigate', 'upload'])
+
+function navRowClass(active: boolean): string {
+  const base = 'group flex items-center gap-2.5 px-2.5 py-1.5 w-full text-left font-medium text-[13px] rounded-lg transition-colors'
+  return active
+    ? `${base} bg-black/[0.06] dark:bg-white/[0.09] text-stone-900 dark:text-white`
+    : `${base} text-stone-600 dark:text-neutral-300 hover:bg-black/[0.04] dark:hover:bg-white/[0.06]`
+}
+</script>
+
+<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-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>
+    </label>
+  </div>
+
+  <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-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">
+      <div class="p-2.5 bg-white/65 dark:bg-white/[0.05] rounded-lg"><p class="font-semibold text-lg text-stone-900 dark:text-white">{{ summary().files }}</p><p class="text-[11px] text-stone-500 dark:text-neutral-400">Files</p></div>
+      <div class="p-2.5 bg-white/65 dark:bg-white/[0.05] rounded-lg"><p class="font-semibold text-lg text-stone-900 dark:text-white">{{ summary().folders }}</p><p class="text-[11px] text-stone-500 dark:text-neutral-400">Folders</p></div>
+    </div>
+  </div>
+
+  <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
+    <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-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>
+    </div>
+  </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-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>
+
+  <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-500 dark:text-neutral-500">{{ folder.count }}</span></button>
+    </template>
+  </nav>
+
+  <div class="p-3 border-black/[0.06] border-t dark:border-white/[0.08]">
+    <Button :disabled="busy()" fullWidth @click="emit('upload')"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-upload-01"></span>Upload files</Button>
+  </div>
+</div>

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/PagesDashboard.stx

@@ -207,7 +207,7 @@ onMount(() => {
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 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 variant="secondary" size="sm" @click="loadPages()">Retry</Button></div>
 
-  <section aria-label="Page metrics" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+  <section aria-label="Page metrics" class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ pages().length }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Views</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalViews()) }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Conversions</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalConversions()) }}</p></article>

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/Email/CapturedMailDetail.stx

@@ -60,7 +60,7 @@ function formatBytes(value: number): string {
         </div>
         <div class="flex-shrink-0 text-right">
           <time class="block text-gray-500 text-xs dark:text-neutral-400" :datetime="selected()?.sentAt || ''">{{ formatDate(selected()?.sentAt || '') }}</time>
-          <span class="block mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ formatBytes(selected()?.size || 0) }}</span>
+          <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ formatBytes(selected()?.size || 0) }}</span>
         </div>
       </div>
     </header>