@stacksjs/defaults 0.75.33 → 0.75.34

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.33",
+  "version": "0.75.34",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.33",
+  "version": "0.75.34",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.75.33",
+    "@stacksjs/mobile": "^0.75.34",
     "@stacksjs/sanitizer": "^0.2.113",
     "ts-qr-codes": "^0.1.8"
   }

package/resources/components/NativeNavBar.stx

@@ -79,18 +79,30 @@ function tapBack(event: MouseEvent): void {
     align-items: center;
     min-height: 2.75rem;
     padding: 0 0.75rem;
-    border-bottom: 1px solid transparent;
-    transition: background-color 180ms ease, border-color 180ms ease;
   }
 
-  .native-nav-bar.is-scrolled {
-    border-color: var(--native-bar-border, rgb(148 163 184 / 0.25));
+  /* The frosted material is always there and only fades. Adding or removing
+     backdrop-filter rebuilds the page's layers, which took 50-140ms of the
+     main thread at the moment the page crossed the threshold, mid-scroll. An
+     opacity change is the compositor's alone, as long as it never reaches 0:
+     WebKit drops a transparent layer and builds it again on the way back. */
+  .native-nav-bar::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-bottom: 1px solid var(--native-bar-border, rgb(148 163 184 / 0.25));
     background: var(--native-bar-background, rgb(248 250 252 / 0.86));
     backdrop-filter: blur(20px) saturate(180%);
     -webkit-backdrop-filter: blur(20px) saturate(180%);
+    opacity: 0.001;
+    pointer-events: none;
+    transition: opacity 180ms ease;
   }
 
-  .dark .native-nav-bar.is-scrolled {
+  .native-nav-bar.is-scrolled::before { opacity: 1; }
+
+  .dark .native-nav-bar::before {
     border-color: var(--native-bar-border-dark, rgb(51 65 85 / 0.6));
     background: var(--native-bar-background-dark, rgb(2 6 23 / 0.86));
   }
@@ -141,11 +153,11 @@ function tapBack(event: MouseEvent): void {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .native-nav-bar, .native-nav-title { transition: none; }
+    .native-nav-bar::before, .native-nav-title { transition: none; }
   }
 
   @media (prefers-reduced-transparency: reduce) {
-    .native-nav-bar.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--native-bar-solid, rgb(248 250 252)); }
-    .dark .native-nav-bar.is-scrolled { background: var(--native-bar-solid-dark, rgb(2 6 23)); }
+    .native-nav-bar::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--native-bar-solid, rgb(248 250 252)); }
+    .dark .native-nav-bar::before { background: var(--native-bar-solid-dark, rgb(2 6 23)); }
   }
 </style>

package/resources/components/NativePullToRefresh.stx

@@ -77,6 +77,8 @@ const indicatorStyle = derived(() => {
     opacity: 0;
     pointer-events: none;
     transform: translateX(-50%) scale(0.6);
+    /* Restyled every frame of a pull: its own layer keeps that off the page's paint. */
+    will-change: transform, opacity;
   }
 
   .dark .native-ptr-indicator { color: var(--native-accent-dark, rgb(96 165 250)); background: var(--native-ptr-background-dark, rgb(30 41 59)); }

package/resources/components/NativeTabItem.stx

@@ -19,7 +19,9 @@ const hasBadge = badge !== '' && badge !== 0 && badge !== '0'
 
 <!-- `draggable="false"`: a slow tap on a busy page reaches the WebView as a
      long press, and a draggable link starts a native drag instead of
-     navigating. -->
+     navigating. `data-stx-prefetch="eager"`: every tab's page is fetched once
+     the current one is idle, so switching tabs is served from the router's
+     cache, as instant as a native tab bar. -->
 <StxLink
   to="{{ href }}"
   aria-label="{{ label }}"
@@ -27,6 +29,7 @@ const hasBadge = badge !== '' && badge !== 0 && badge !== '0'
   activeMatch="{{ match }}"
   class="native-tab-item"
   draggable="false"
+  data-stx-prefetch="eager"
 >
   <span class="native-tab-glyph">
     <i aria-hidden="true" class="{{ icon }} native-tab-icon"></i>