@stacksjs/defaults 0.75.329 → 0.75.334

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

@@ -294,7 +294,7 @@ function formatTimestamp(iso: string | null | undefined): string {
               </div>
               <div class="px-2 py-1.5">
                 <p class="text-[10px] text-zinc-500 dark:text-zinc-400" :text="attachment.mimeType"></p>
-                <p class="text-[10px] text-zinc-400" :text="formatBytes(attachment.sizeBytes)"></p>
+                <p class="text-[10px] text-zinc-500 dark:text-zinc-400" :text="formatBytes(attachment.sizeBytes)"></p>
               </div>
             </li>
           </ul>
@@ -317,14 +317,14 @@ function formatTimestamp(iso: string | null | undefined): string {
             </div>
           </div>
 
-          <div :if="cardComments().length === 0 && !loadingCard()" class="italic text-xs text-zinc-400">No comments yet.</div>
+          <div :if="cardComments().length === 0 && !loadingCard()" class="italic text-xs text-zinc-500 dark:text-zinc-400">No comments yet.</div>
           <ul class="space-y-3">
             <li :for="comment in cardComments" class="flex gap-3">
               <span class="inline-flex flex-shrink-0 items-center justify-center h-7 w-7 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(comment.authorName, comment.authorEmail)"></span>
               <div class="flex-1 min-w-0">
                 <div class="flex flex-wrap gap-2 items-baseline">
                   <span class="font-medium text-xs text-zinc-700 dark:text-zinc-200" :text="comment.authorName || comment.authorEmail || 'Unknown'"></span>
-                  <span class="text-[10px] text-zinc-400" :text="formatTimestamp(comment.createdAt)"></span>
+                  <span class="text-[10px] text-zinc-500 dark:text-zinc-400" :text="formatTimestamp(comment.createdAt)"></span>
                   <template :if="editingCommentId() !== comment.id">
                     <Button variant="ghost" size="xs" @click="startCommentEdit(comment.id, comment.body)">Edit</Button>
                     <Button variant="ghost" size="xs" @click="requestDelete('comment', comment.id)"><span class="text-red-500">Delete</span></Button>
@@ -365,7 +365,7 @@ function formatTimestamp(iso: string | null | undefined): string {
 
           <div :if="!showLabelPicker()" class="flex flex-wrap gap-1">
             <span :for="label in cardLabels" :class="`px-2 py-0.5 text-xs font-medium rounded ${labelChipClass(label.color)}`" :text="label.name"></span>
-            <span :if="cardLabels().length === 0" class="italic text-xs text-zinc-400">None</span>
+            <span :if="cardLabels().length === 0" class="italic text-xs text-zinc-500 dark:text-zinc-400">None</span>
           </div>
 
           <div :if="showLabelPicker()" class="space-y-2">
@@ -407,11 +407,11 @@ function formatTimestamp(iso: string | null | undefined): string {
               <span class="inline-flex items-center justify-center h-6 w-6 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(assignee.name, assignee.email)"></span>
               <span :text="assignee.name || assignee.email || 'Unknown'"></span>
             </div>
-            <span :if="cardAssignees().length === 0" class="italic text-xs text-zinc-400">Unassigned</span>
+            <span :if="cardAssignees().length === 0" class="italic text-xs text-zinc-500 dark:text-zinc-400">Unassigned</span>
           </div>
 
           <div :if="showAssigneePicker()" class="overflow-y-auto space-y-1 max-h-48">
-            <p :if="kanban.users().length === 0" class="italic text-xs text-zinc-400">No users to assign.</p>
+            <p :if="kanban.users().length === 0" class="italic text-xs text-zinc-500 dark:text-zinc-400">No users to assign.</p>
             <button :for="user in kanban.users" type="button" :aria-pressed="String(cardAssignees().some(assignee => assignee.userId === user.id))" @click="toggleAssignee(user.id)" class="flex gap-2 items-center px-2 py-1.5 w-full text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded">
               <span class="inline-flex flex-shrink-0 items-center justify-center h-6 w-6 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(user.name, user.email)"></span>
               <span class="flex-1 text-zinc-700 truncate dark:text-zinc-200" :text="user.name || user.email"></span>
@@ -426,8 +426,8 @@ function formatTimestamp(iso: string | null | undefined): string {
         </section>
 
         <section class="pt-3 border-t border-zinc-200 dark:border-zinc-800">
-          <p class="text-[10px] text-zinc-400">Created <span :text="formatTimestamp(openCard()?.createdAt)"></span></p>
-          <p :if="openCard()?.updatedAt && openCard()?.updatedAt !== openCard()?.createdAt" class="text-[10px] text-zinc-400">Updated <span :text="formatTimestamp(openCard()?.updatedAt)"></span></p>
+          <p class="text-[10px] text-zinc-500 dark:text-zinc-400">Created <span :text="formatTimestamp(openCard()?.createdAt)"></span></p>
+          <p :if="openCard()?.updatedAt && openCard()?.updatedAt !== openCard()?.createdAt" class="text-[10px] text-zinc-500 dark:text-zinc-400">Updated <span :text="formatTimestamp(openCard()?.updatedAt)"></span></p>
         </section>
       </aside>
     </div>

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

@@ -165,11 +165,11 @@ 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="loadCarts()">Retry</Button></div>
 
   <section aria-label="Cart recovery metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <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">Sitting there</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().open.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Carts abandoned or expired</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">Worth</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().openValue) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ money(summary().averageValue) }} average</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">Chased</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().contacted.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Written to and still cold</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">Recovered</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().recoveredValue) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ summary().recovered.toLocaleString() }} carts checked out after an email</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">Recovery rate</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ percentage(summary().recoveryRate) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Of the carts actually chased</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">Sitting there</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().open.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Carts abandoned or expired</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">Worth</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().openValue) }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ money(summary().averageValue) }} average</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">Chased</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().contacted.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Written to and still cold</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">Recovered</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().recoveredValue) }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ summary().recovered.toLocaleString() }} carts checked out after an email</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">Recovery rate</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ percentage(summary().recoveryRate) }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Of the carts actually chased</p></article>
   </section>
 
   <section :if="campaigns().length > 0" aria-label="Recovery campaigns" class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">

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

@@ -273,11 +273,11 @@ 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="loadCampaigns()">Retry</Button></div>
 
   <section aria-label="Campaign metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <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">Campaigns</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Persisted records</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">Live</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().live }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Scheduled, sending, or active</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">Completed</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().sent }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Sent or completed</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">Recipients</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().recipients.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Persisted successful sends</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">Delivery issues</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().failedDeliveries.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Failed, bounced, or complained</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">Campaigns</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Persisted records</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">Live</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().live }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Scheduled, sending, or active</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">Completed</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().sent }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Sent or completed</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">Recipients</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().recipients.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Persisted successful sends</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">Delivery issues</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().failedDeliveries.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Failed, bounced, or complained</p></article>
   </section>
 
   <section class="space-y-3">

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

@@ -206,10 +206,10 @@ onMount(() => {
   </div>
 
   <section aria-label="Email list metrics" class="grid gap-3 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">Email lists</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ summary().active }} active</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">Memberships</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().subscribers.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Subscribed and pending</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">New this week</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().newThisWeek.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Subscribed membership rows</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">Campaigns</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().campaigns.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Linked campaign records</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">Email lists</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ summary().active }} active</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">Memberships</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().subscribers.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Subscribed and pending</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">New this week</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().newThisWeek.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Subscribed membership rows</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">Campaigns</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().campaigns.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Linked campaign records</p></article>
   </section>
 
   <section class="space-y-3">

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

@@ -189,10 +189,10 @@ onMount(() => {
   <div :if="summary().failed > 0" class="flex gap-3 items-start p-4 text-red-800 text-sm dark:text-red-200 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span class="shrink-0 mt-0.5 h-5 w-5 i-hugeicons-alert-02"></span><p>{{ summary().failed }} {{ summary().failed === 1 ? 'post has' : 'posts have' }} a failed status and may need review.</p></div>
 
   <section aria-label="Social post metrics" class="grid gap-3 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">Social posts</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ summary().published }} published, {{ summary().drafts }} drafts</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">Scheduled</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().scheduled }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Persisted schedule times</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">Reach</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().reach.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Recorded platform reach</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">Engagement</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().engagement.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Likes, shares, and comments</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">Social posts</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ summary().published }} published, {{ summary().drafts }} drafts</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">Scheduled</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().scheduled }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Persisted schedule times</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">Reach</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().reach.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Recorded platform reach</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">Engagement</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().engagement.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Likes, shares, and comments</p></article>
   </section>
 
   <section class="space-y-3">

package/resources/components/Dashboard/Models/ModelsOverview.stx

@@ -204,7 +204,7 @@ onMount(() => {
             <div :if="model.apiUri" class="flex gap-2 items-center mt-4">
               <span class="inline-flex px-2 py-0.5 font-medium text-green-700 text-xs dark:text-green-300 bg-green-50 dark:bg-green-950/40 rounded">API</span>
               <code class="text-neutral-500 text-xs truncate dark:text-neutral-400">{{ model.apiUri }}</code>
-              <span class="ml-auto text-neutral-400 text-xs">{{ model.apiRoutes.length }} routes</span>
+              <span class="ml-auto text-neutral-500 text-xs dark:text-neutral-400">{{ model.apiRoutes.length }} routes</span>
             </div>
           </StxLink>
         </div>

package/resources/components/Dashboard/Navbar.stx

@@ -58,12 +58,12 @@ useClickOutside(userMenu, () => setDropdownOpen(false))
   <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
     <StxLink
       to="/models"
-      class="flex relative flex-1 items-center pl-8 text-gray-400 sm:text-sm hover:text-gray-600 dark:hover:text-neutral-200 transition-colors"
+      class="flex relative flex-1 items-center pl-8 text-gray-500 sm:text-sm dark:text-gray-400 hover:text-gray-600 dark:hover:text-neutral-200 transition-colors"
       aria-label="Search model records"
     >
       <span aria-hidden="true" class="absolute left-0 h-5 w-5 i-hugeicons-search-01"></span>
       <span>Search model records</span>
-      <kbd class="ml-auto 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 class="ml-auto 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">
         ⌘K
       </kbd>
     </StxLink>

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

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

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

@@ -55,7 +55,7 @@ function statusVariant(state: OperatorOperation['state']): 'default' | 'primary'
         <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ operation.actorName }} at {{ formatDate(operation.finishedAt || operation.createdAt) }}</p>
         <p :if="operation.error" class="mt-1 text-red-600 text-xs dark:text-red-400">{{ operation.error }}</p>
       </div>
-      <code class="font-mono text-[11px] text-gray-400 dark:text-neutral-500">{{ operation.id }}</code>
+      <code class="font-mono text-[11px] text-gray-500 dark:text-neutral-500">{{ operation.id }}</code>
     </li>
   </ul>
 </Card>

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

@@ -26,7 +26,7 @@ function variant(status: RecoveryJob['status']): 'default' | 'primary' | 'succes
         <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ job.progress.phase || 'queued' }} · {{ formatDate(job.finishedAt || job.startedAt || job.createdAt) }}</p>
         <p :if="job.error" class="mt-1 text-red-600 text-xs dark:text-red-400">{{ job.error }}</p>
       </div>
-      <code class="font-mono text-[11px] text-gray-400 dark:text-neutral-500">{{ job.id }}</code>
+      <code class="font-mono text-[11px] text-gray-500 dark:text-neutral-500">{{ job.id }}</code>
     </li>
   </ul>
 </Card>

package/resources/components/Dashboard/Remote/RemoteConsole.stx

@@ -109,7 +109,7 @@ onMount(() => {
             <span class="h-4 w-4 i-hugeicons-command-line"></span>
             Open terminal
           </Button>
-          <span :if="!entry.terminal" class="text-gray-400 text-xs dark:text-neutral-500">Named commands only</span>
+          <span :if="!entry.terminal" class="text-gray-500 text-xs dark:text-neutral-500">Named commands only</span>
         </li>
       </template>
     </ul>

package/resources/components/Dashboard/Settings/SettingsDashboard.stx

@@ -220,7 +220,7 @@ void loadFiles()
           >
             <span class="flex-none h-4 w-4 i-hugeicons-settings-02"></span>
             <span class="flex-1 font-medium text-sm truncate">{{ file.title }}</span>
-            <span class="text-[10px] text-neutral-400">{{ file.size < 1024 ? file.size + ' B' : Math.round(file.size / 1024) + ' KB' }}</span>
+            <span class="text-[10px] text-neutral-500 dark:text-neutral-400">{{ file.size < 1024 ? file.size + ' B' : Math.round(file.size / 1024) + ' KB' }}</span>
           </button>
         </template>
       </nav>

package/resources/components/Dashboard/UI/Checkbox.stx

@@ -44,7 +44,7 @@ const iconClass = derived(() => [
 const labelClass = derived(() => [
   sizeClasses[liveSize()]?.label || sizeClasses.md.label,
   'font-medium',
-  liveDisabled() ? 'text-neutral-400 dark:text-neutral-500' : 'text-neutral-700 dark:text-neutral-200',
+  liveDisabled() ? 'text-neutral-500 dark:text-neutral-500' : 'text-neutral-700 dark:text-neutral-200',
 ].join(' '))
 const descriptionClass = derived(() => [
   sizeClasses[liveSize()]?.description || sizeClasses.md.description,

package/resources/components/Dashboard/UI/MetricCards.stx

@@ -26,7 +26,7 @@ const columns = useReactiveProp('columns', '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">{{ item.label }}</p>
       <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
-      <p :if="item.detail" class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
+      <p :if="item.detail" class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ item.detail }}</p>
     </article>
   </template>
 </section>

package/resources/components/Dashboard/UI/Pagination.stx

@@ -100,7 +100,7 @@ function emitItemsPerPage(event: Event): void {
     </Button>
 
     <template :for="page in visiblePages()">
-      <span :if="typeof page !== 'number'" class="px-2 text-neutral-400 dark:text-neutral-500">...</span>
+      <span :if="typeof page !== 'number'" class="px-2 text-neutral-500 dark:text-neutral-500">...</span>
       <Button :if="typeof page === 'number' && page === currentPage()" @click="goToPage(page)">
         <span aria-current="page">{{ page }}</span>
       </Button>

package/resources/components/Dashboard/UI/Textarea.stx

@@ -77,7 +77,7 @@ function handleBlur(event: Event): void {
     </label>
     <span
       :if="liveShowCount() && liveMaxLength()"
-      class="text-neutral-400 text-xs dark:text-neutral-500"
+      class="text-neutral-500 text-xs dark:text-neutral-500"
       :text="limitedCountLabel()"
     ></span>
   </div>
@@ -103,7 +103,7 @@ function handleBlur(event: Event): void {
 
     <span
       :if="liveShowCount() && !liveMaxLength()"
-      class="absolute bottom-2 right-2 px-1 text-neutral-400 text-xs dark:text-neutral-500 bg-white dark:bg-neutral-900"
+      class="absolute bottom-2 right-2 px-1 text-neutral-500 text-xs dark:text-neutral-500 bg-white dark:bg-neutral-900"
       :text="openCountLabel()"
     ></span>
   </div>

package/resources/components/Dashboard/UI/Toggle.stx

@@ -51,7 +51,7 @@ const thumbClass = derived(() => [
 ].join(' '))
 const labelClass = derived(() => [
   'text-[13px] font-medium tracking-tight',
-  liveDisabled() ? 'text-neutral-400 dark:text-neutral-600' : 'text-neutral-700 dark:text-neutral-200',
+  liveDisabled() ? 'text-neutral-500 dark:text-neutral-600' : 'text-neutral-700 dark:text-neutral-200',
 ].join(' '))
 const descriptionClass = derived(() => [
   'mt-0.5 text-[12px]',