fix(ui): harden public page components

bun.lock

@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.23",
+      "version": "0.8.24",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

docs/ui-visual-contract-0.8.json

@@ -8,7 +8,7 @@
     "packages/ui/components/AuthForm.wrn": "46a3e1db1c9e69efc52473cbf2fababdcbfe7144e7571469638d2c3addd4d7f0",
     "packages/ui/components/AuthSplitLayout.wrn": "724938921bc38cc5a0422de69c237b630f099f2df94c66977362b048e4a420a5",
     "packages/ui/components/AvatarGroup.wrn": "30b702e06a1adff8b9bae32820206020e086a69560cbdcbadb19f04f25951f97",
-    "packages/ui/components/BackToTop.wrn": "5b760ec7941ffd8e58c5dedae1b322ee46e072e927533d7ec077b511a816e436",
+    "packages/ui/components/BackToTop.wrn": "d4b8d1fd37ff26c89b4276ce54ce6ac9581dc2ff8bbcbe160e072778bba76eab",
     "packages/ui/components/Blockquote.wrn": "3761bf13babb6eb07ce7392258ee439ef5478064cf589eff63f945b950e00d2e",
     "packages/ui/components/Breadcrumb.wrn": "9f6c23550ebfc635c36ca8660953775170b4a471c0cd0206b9a7ba760994980a",
     "packages/ui/components/ButtonGroup.wrn": "fc23565ad56bd8483fcb777d9e02ccba2f9ea476c085754d42503bb83b718f72",
@@ -57,10 +57,10 @@
     "packages/ui/components/Marquee.wrn": "81cd80732be34c8d7e4bf28b00347e1a9273166afdf66589d9f5d5774b69403b",
     "packages/ui/components/MegaMenu.wrn": "6a6db166259f8f2bd7ac8fbb21dba6d915c4b936d87b19805caa78189f54730a",
     "packages/ui/components/MetricCard.wrn": "513a6e99be3d9db46d96af9942b51331a0a048b184603e77e814506f0a52bdc5",
-    "packages/ui/components/MetricGrid.wrn": "c71e53249835908833055b553e64a8ee55fdf11ac4605436a9581ebb87a0608b",
+    "packages/ui/components/MetricGrid.wrn": "1fcebf51dcbe8520fe16bda904c1ef206c25c3900438d53877492c64ea21a1a5",
     "packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2",
     "packages/ui/components/Nav.wrn": "c45b0ecb42250f4b3ede33c8932a025f789dda9ef48dbf332459ae458163e69a",
-    "packages/ui/components/Navbar.wrn": "01903230210cd2e5e6d9325a0708f85af9623d4118e3a53f1adb770fd545425d",
+    "packages/ui/components/Navbar.wrn": "1fafef0e0a87ca15547e338df2711634dab27dcde99263712a85f5d59b9f16a0",
     "packages/ui/components/PageHeader.wrn": "321cde36ce8d521a57901033d46e8b437f42e558cca27f49ca26f7172aff1d54",
     "packages/ui/components/Pagination.wrn": "d54226705d4556f76ee5f0d6ae82d101ca6d006397756d547a9aa5954415ba39",
     "packages/ui/components/PinInput.wrn": "4dc398456f6392d7925db941debb484c7cb0358ecef527f696fe5ec4800a7602",
@@ -70,13 +70,13 @@
     "packages/ui/components/PublicPageShell.wrn": "3d3f25c03d48f3d3d7e3c567e79cb137c7fce1867e054fd6d440fa1d2e961077",
     "packages/ui/components/RangeSlider.wrn": "bbf646c5d5a89a62986290db811d77b8f635ebcaea9ca2d334b569aa5edc785b",
     "packages/ui/components/Rating.wrn": "902b55c64e3798f3097f09b1558d1a2372f66d4f760662de085783108ee04587",
-    "packages/ui/components/Scrollspy.wrn": "b9c6400ee92a7c228362610a2051f37bff1d3baba1dbacd66d58397dfda5d856",
+    "packages/ui/components/Scrollspy.wrn": "fb1b2014c7caca2d001d80952cc238c06f1722602f6c55f72281d13310f1bee2",
     "packages/ui/components/SearchBox.wrn": "3f88340e0b69c0cd552023c72bd22dc511bc00422d46060097bcf0777e683675",
-    "packages/ui/components/Section.wrn": "45b7a1977c25a6020d5cc8bab2ce9c80730e7ec2d51ad53e8c9f64cd9b5b64cd",
+    "packages/ui/components/Section.wrn": "78da13eb8bc1acafe8e6151cbaeed4baaac2ab860e3209f1d13c467f279d2e68",
     "packages/ui/components/SectionHeader.wrn": "aca2df8eb35806096f5b9af466b018e5c22a19422e8665f488380da577a0ceb5",
     "packages/ui/components/Sidebar.wrn": "e0250a973aea589a4d7dcc8b30dd01f22592bf22ba012e54a672b2a2288d8af6",
     "packages/ui/components/SplitHero.wrn": "843387dc7b920b3cf6a1b2b785b8653c281982e524479edc2638a89381ff3577",
-    "packages/ui/components/StatsBar.wrn": "c273bd6ca417a0a20e5e6f1214414f678741b73bedd885fea1037575fa8c5b95",
+    "packages/ui/components/StatsBar.wrn": "69e6592cbd48ba893ac3a495076c73c14f1779078b26fcb6d89e74ee4ea18d23",
     "packages/ui/components/Stepper.wrn": "7ec0902acd7cb74b44d490215b6421dae9a41731735ad1e9aec17e8bfc3fa142",
     "packages/ui/components/StrongPassword.wrn": "407eabcc13affc9323a346ddba8e39c81b885a59ef7043d2bd5567d4b7553282",
     "packages/ui/components/StyledIcon.wrn": "0874f9a234b053a7c8b9c6983be5d664453a64c4576dff1a049101e249a2866d",

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",