@stacksjs/defaults 0.75.146 → 0.75.148

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.146",
+  "version": "0.75.148",
   "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.146",
+  "version": "0.75.148",
   "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.35",
-    "@stacksjs/mobile": "0.75.146",
+    "@stacksjs/mobile": "0.75.148",
     "@stacksjs/sanitizer": "^0.2.422",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/NativeComponents.test.ts

@@ -84,7 +84,16 @@ describe('Native components', () => {
   it('backs out through history, and sticks within the page rather than its wrapper', () => {
     const bar = read('NativeNavBar')
     expect(bar).toContain('if (goBack()) event.preventDefault()')
-    expect(bar).toContain('[data-stx-scope]:has(> .native-nav) { display: contents; }')
+    expect(bar).toContain('[data-stx-scope]:has(> .native-nav),')
+    // A header component wrapping the bar adds a wrapper of its own.
+    expect(bar).toContain('[data-stx-scope]:has(> [data-stx-scope] > .native-nav) { display: contents; }')
+    // The actions keep their buttons' width; a long title truncates instead of running under them.
+    expect(bar).toContain('grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);')
+    expect(bar).toContain('.native-nav-actions { justify-content: flex-end; container-type: normal; }')
+    // The back link follows a parent path known only in the browser.
+    expect(bar).toContain("const navBack = useReactiveProp<string>('back', '')")
+    expect(bar).toContain(':href="navBack()" :show="navBack()"')
+    expect(bar).not.toContain('@if(back)')
     expect(bar).toContain("useReactiveProp<string>('title', '')")
   })
 

package/resources/components/NativeNavBar.stx

@@ -67,9 +67,14 @@ onMount(() => {
 })
 onDestroy(() => stopScroll?.())
 
+// Reactive like the title: a screen whose parent is known only in the browser
+// (`:back="'/m/workout/' + id"`) had no back button at all, because the
+// server rendered the link only when it knew the path.
+const navBack = useReactiveProp<string>('back', '')
+
 const barClass = derived(() => {
   const collapsed = (!isLarge() && !onScroll()) || scrolled()
-  return `native-nav-bar${isLarge() ? ' is-large' : ''}${collapsed ? ' is-collapsed' : ''}${scrolled() ? ' is-scrolled' : ''}`
+  return `native-nav-bar${isLarge() ? ' is-large' : ''}${collapsed ? ' is-collapsed' : ''}${scrolled() ? ' is-scrolled' : ''}${navBack() ? ' has-back' : ''}`
 })
 
 function tapBack(event: MouseEvent): void {
@@ -83,12 +88,10 @@ function tapBack(event: MouseEvent): void {
 <div ref="nativeNav" class="native-nav" data-native-nav-bar>
   <header :class="barClass()">
     <div class="native-nav-side">
-      @if(back)
-        <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>
-      @endif
+      <a href="{{ back }}" :href="navBack()" :show="navBack()" style="{{ back ? '' : 'display: none' }}" 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>
       <slot name="leading" />
     </div>
     <p class="native-nav-title" aria-hidden="{{ large ? 'true' : 'false' }}">{{ navTitle() }}</p>
@@ -105,16 +108,23 @@ function tapBack(event: MouseEvent): void {
 <style>
   /* The element stx wraps each component in is a box too, as tall as the bar
      and its title; the bar stuck inside it and scrolled away with the title.
-     Both boxes step aside so the bar sticks to the page. */
+     Both boxes step aside so the bar sticks to the page, and so does the
+     wrapper of an app's own header component around this one (HQ's
+     MobileHeader): one box more, and the bar scrolled away again. */
   .native-nav,
-  [data-stx-scope]:has(> .native-nav) { display: contents; }
+  [data-stx-scope]:has(> .native-nav),
+  [data-stx-scope]:has(> [data-stx-scope] > .native-nav) { display: contents; }
 
   .native-nav-bar {
     position: sticky;
     top: env(safe-area-inset-top, 0px);
     z-index: 30;
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    /* The actions never shrink below their buttons: three of them (a
+       workout's keep-awake, messages, account) ran under a long title. The
+       title gives way and truncates instead; the back side keeps at least
+       its chevron. */
+    grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
     gap: 0.5rem;
     align-items: center;
     min-height: 2.75rem;
@@ -161,7 +171,9 @@ function tapBack(event: MouseEvent): void {
      too narrow for its word and keep only the chevron, as iOS does, rather
      than running into the title. */
   .native-nav-side { display: flex; gap: 0.25rem; align-items: center; min-width: 0; container-type: inline-size; }
-  .native-nav-actions { justify-content: flex-end; }
+  .native-nav-bar.has-back { grid-template-columns: minmax(2.75rem, 1fr) auto minmax(max-content, 1fr); }
+  /* Sized by its buttons, so not a size container (that made its minimum 0). */
+  .native-nav-actions { justify-content: flex-end; container-type: normal; }
 
   .native-nav-title {
     max-width: 60vw;