fix(ui): harden public page components

packages/ui/components/BackToTop.wrn

@@ -120,11 +120,11 @@ component BackToTop {
     }
 
     .wrn-back-to-top[data-position="right"] {
-      right: 1.5rem;
+      right: max(1.5rem, env(safe-area-inset-right));
     }
 
     .wrn-back-to-top[data-position="left"] {
-      left: 1.5rem;
+      left: max(1.5rem, env(safe-area-inset-left));
     }
 
     .wrn-back-to-top[data-position="center"] {

packages/ui/components/MetricGrid.wrn

@@ -92,7 +92,9 @@ component MetricGrid {
               @action='forwardAction(item, itemIndex, event)'
             />
           {:empty}
-            <slot></slot>
+            <div class="wrn-metric-grid__empty" role="status">
+              <slot>No metrics are available.</slot>
+            </div>
           {/each}
         </div>
       </div>
@@ -100,6 +102,15 @@ component MetricGrid {
   }
 
   style {
+    .wrn-metric-grid__empty {
+      grid-column: 1 / -1;
+      padding: 1.25rem;
+      color: var(--wrn-color-text-muted);
+      background: var(--wrn-color-surface-soft);
+      border: 1px dashed var(--wrn-color-border);
+      border-radius: 0.9rem;
+      text-align: center;
+    }
     .wrn-metric-grid__frame {
       width: 100%;
       min-width: 0;

packages/ui/components/Navbar.wrn

@@ -76,6 +76,7 @@ size: string = "default"
       </div>
 
       <div class="wrn-navbar__main">
+        {#if brand.logo || brand.icon || brand.label || brand.description}
         <a class="wrn-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
           {#if brand.logo}
             <img class="wrn-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
@@ -90,6 +91,7 @@ size: string = "default"
             </span>
           {/if}
         </a>
+        {/if}
 
         <button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
           <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
@@ -509,6 +511,10 @@ size: string = "default"
     }
 
     @media (max-width: 900px) {
+    .wrn-navbar__main {
+        min-height: 3.5rem;
+        padding-block: 0.4rem;
+      }
     .wrn-navbar--width-compact .wrn-navbar__main {
         width: 100%;
       }
@@ -527,7 +533,8 @@ size: string = "default"
         background: var(--wrn-color-surface);
         border-bottom: 1px solid var(--wrn-color-border);
         box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
-        max-height: calc(100dvh - 4rem);
+        height: calc(100dvh - 3.5rem);
+        max-height: calc(100dvh - 3.5rem);
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: contain;
@@ -535,6 +542,13 @@ size: string = "default"
     .wrn-navbar__collapse.is-open {
         display: flex;
       }
+    .wrn-navbar:has(.wrn-navbar__collapse.is-open)::after {
+        position: fixed;
+        z-index: -1;
+        inset: 0;
+        background: rgb(15 23 42 / 0.42);
+        content: "";
+      }
     .wrn-navbar__menus,
       .wrn-navbar__actions {
         width: 100%;

packages/ui/components/Scrollspy.wrn

@@ -75,6 +75,10 @@ component Scrollspy {
       max-width: 100%;
     }
 
+    .wrn-scrollspy:not(:has(.wrn-scrollspy__item)):not(:has(slot > *)) {
+      display: none;
+    }
+
     .wrn-scrollspy[data-color="secondary"] {
       --scrollspy-accent: var(--wrn-color-secondary);
     }

packages/ui/components/Section.wrn

@@ -54,6 +54,7 @@ component Section {
       padding-block: 3rem;
       background: var(--section-tint);
       color: var(--section-ink);
+      scroll-margin-top: var(--wrn-sticky-header-offset, 5rem);
     }
 
     .wrn-section[data-spacing="sm"] {

packages/ui/components/StatsBar.wrn

@@ -91,6 +91,8 @@ component StatsBar {
                 </div>
               {/if}
             </article>
+          {:empty}
+            <div class="wrn-stats-bar__empty" role="status">No statistics are available.</div>
           {/each}
         </div>
       </div>
@@ -98,6 +100,15 @@ component StatsBar {
   }
 
   style {
+    .wrn-stats-bar__empty {
+      grid-column: 1 / -1;
+      padding: 1.25rem;
+      color: var(--wrn-color-text-muted);
+      background: var(--wrn-color-surface-soft);
+      border: 1px dashed var(--wrn-color-border);
+      border-radius: 0.9rem;
+      text-align: center;
+    }
     .wrn-stats-bar {
       --stats-accent: var(--wrn-color-primary);
       --stats-contrast: var(--wrn-color-primary-contrast);

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.23",
+  "version": "0.8.24",
   "private": true,
   "type": "module",
   "main": "src/index.ts",