@stacksjs/defaults 0.75.102 → 0.75.104

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.102",
+  "version": "0.75.104",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "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.102",
+  "version": "0.75.104",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,8 +55,8 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "^0.75.102",
-    "@stacksjs/sanitizer": "^0.2.414",
+    "@stacksjs/mobile": "^0.75.104",
+    "@stacksjs/sanitizer": "^0.2.419",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"

package/resources/components/NativeAppShell.stx

@@ -10,7 +10,7 @@ const { tabBar = false } = defineProps<NativeAppShellProps>()
 </script>
 
 <script client>
-import { deepLinks as deepLinkService, device, followDeepLinks, installNativeChrome, installPressables, isNativeMobile, splash, whenNativeMobile } from '@stacksjs/mobile'
+import { deepLinks as deepLinkService, device, followDeepLinks, installNativeChrome, installPressables, isNativeMobile, splash, tabBar as nativeTabBar, whenNativeMobile } from '@stacksjs/mobile'
 
 const className = useReactiveProp<string>('class', '')
 // A bare attribute arrives as an empty string.
@@ -61,7 +61,12 @@ onMount(() => {
   if (!root) return
   stopPressables = installPressables(root.ownerDocument)
   void whenNativeMobile().then((native) => {
-    if (native && !destroyed) stopChrome = installNativeChrome(root.ownerDocument)
+    if (!native || destroyed) return
+    stopChrome = installNativeChrome(root.ownerDocument)
+    // A shell without a tab bar (sign-in, a flow of its own) says so: an app
+    // whose native bar was configured to show from its first frame, before
+    // any page had described one, would otherwise keep it over this screen.
+    if (!root.querySelector('.native-app-tab-slot') && nativeTabBar.isAvailable()) nativeTabBar.hide()
   })
 })
 onDestroy(() => {

package/resources/components/NativeComponents.test.ts

@@ -102,6 +102,11 @@ describe('Native components', () => {
     expect(sheet).toContain("useModel('open'")
   })
 
+  it('hides the native tab bar under a shell that has none, like a sign-in screen', () => {
+    const shell = read('NativeAppShell')
+    expect(shell).toContain("if (!root.querySelector('.native-app-tab-slot') && nativeTabBar.isAvailable()) nativeTabBar.hide()")
+  })
+
   it('covers the tab bar while up, and closes when its screen is left', () => {
     const sheet = read('NativeSheet')
     expect(sheet).toContain('coverTabBar(element, true)')
@@ -203,7 +208,8 @@ describe('Native components feel native', () => {
 
   it('keeps the native chrome in step with the page once in the phone app', () => {
     const shell = read('NativeAppShell')
-    expect(shell).toContain('if (native && !destroyed) stopChrome = installNativeChrome(root.ownerDocument)')
+    expect(shell).toContain('if (!native || destroyed) return')
+    expect(shell).toContain('stopChrome = installNativeChrome(root.ownerDocument)')
   })
 
   it('links the bar to the scroll a frame at a time, and stretches the large title past the top', () => {

package/resources/components/NativeNavBar.stx

@@ -84,7 +84,7 @@ function tapBack(event: MouseEvent): void {
   <header :class="barClass()">
     <div class="native-nav-side">
       @if(back)
-        <a href="{{ back }}" class="native-nav-back" :aria-label="backText()" draggable="false" @click="tapBack">
+        <a href="{{ back }}" class="native-nav-back" :aria-label="backText()" draggable="false" data-native-back @click="tapBack">
           <NativeSymbol name="chevron.backward" icon="i-lucide-chevron-left" weight="semibold" class="native-nav-back-icon" />
           <span class="native-nav-back-label">{{ backText() }}</span>
         </a>