@stacksjs/defaults 0.75.72 → 0.75.74

package/app/Actions/Dashboard/Buddy/buddy-chat.ts

@@ -1,11 +1,12 @@
 import type { AIMessage, AIProvider, ConfiguredAIOptions } from '@stacksjs/ai'
+import { getAIProviderConfiguration } from '@stacksjs/ai'
 
 /**
- * The two keys this check reads out of the environment.
+ * The keys this check reads out of the environment.
  *
  * The index signature is what makes `process.env` assignable: `ProcessEnv`
- * declares no named members, so a bare two-key interface shares nothing with
- * it and TypeScript rejects the call - the one thing every caller passes.
+ * declares no named members, so a bare interface shares nothing with it and
+ * TypeScript rejects the call - the one thing every caller passes.
  */
 export interface BuddyProviderEnvironment {
   ANTHROPIC_API_KEY?: string
@@ -13,25 +14,50 @@ export interface BuddyProviderEnvironment {
   [key: string]: string | undefined
 }
 
-export function resolveBuddyProvider(config: ConfiguredAIOptions): AIProvider {
-  const value = String(config.default || 'openai').toLowerCase()
-  if (value === 'anthropic' || value.startsWith('anthropic.'))
-    return 'anthropic'
-  if (value === 'ollama')
-    return 'ollama'
-  return 'openai'
+export interface BuddyProviderStatus {
+  /** `null` when config/ai.ts names a provider Stacks has no driver for. */
+  provider: AIProvider | null
+  configured: boolean
+  /** Why Buddy cannot answer yet, for the dashboard to show as is. */
+  problem: string | null
+  /** The environment key that would configure the provider, when one would. */
+  missingKey: string | null
 }
 
-export function isBuddyProviderConfigured(
-  provider: AIProvider,
+const PROVIDER_KEYS: Partial<Record<AIProvider, string>> = {
+  anthropic: 'ANTHROPIC_API_KEY',
+  openai: 'OPENAI_API_KEY',
+}
+
+/**
+ * Which provider Buddy answers with and whether it can, from the same
+ * resolution `createAIClient()` uses. Buddy kept its own copy, which sent
+ * every default it did not recognise - a Bedrock model, `bedrock`, a typo -
+ * to OpenAI, and treated a provider reachable through a `baseUrl` as
+ * unconfigured. An unconfigured app still defaults to OpenAI.
+ */
+export function buddyProviderStatus(
   config: ConfiguredAIOptions,
-  environment: BuddyProviderEnvironment,
-): boolean {
-  if (provider === 'anthropic')
-    return Boolean(config.drivers?.anthropic?.apiKey || environment.ANTHROPIC_API_KEY)
-  if (provider === 'openai')
-    return Boolean(config.drivers?.openai?.apiKey || environment.OPENAI_API_KEY)
-  return true
+  environment: BuddyProviderEnvironment = process.env,
+): BuddyProviderStatus {
+  let configuration
+  try {
+    configuration = getAIProviderConfiguration({ ...config, default: config.default || 'openai' }, undefined, environment)
+  }
+  catch (error) {
+    return { provider: null, configured: false, problem: (error as Error).message, missingKey: null }
+  }
+
+  if (configuration.configured)
+    return { provider: configuration.provider, configured: true, problem: null, missingKey: null }
+
+  const missingKey = PROVIDER_KEYS[configuration.provider] ?? null
+  return {
+    provider: configuration.provider,
+    configured: false,
+    problem: missingKey ? `${missingKey} is not configured.` : `${configuration.provider} is not configured.`,
+    missingKey,
+  }
 }
 
 export function buddySystemPrompt(): string {

package/app/Actions/Dashboard/Settings/mail-settings.ts

@@ -161,7 +161,9 @@ export async function readMailSettings(options: EnvironmentFileOptions = {}): Pr
       apiKeyConfigured: configured(entries.MAILGUN_API_KEY),
     },
     mailtrap: {
-      host: entries.MAILTRAP_HOST ?? 'https://sandbox.api.mailtrap.io/api/send',
+      // Empty means the driver decides: the sandbox inbox when MAILTRAP_INBOX_ID
+      // is set, real delivery through the Sending API when it is not.
+      host: entries.MAILTRAP_HOST ?? '',
       inboxId: entries.MAILTRAP_INBOX_ID ?? '',
       tokenConfigured: configured(entries.MAILTRAP_TOKEN),
     },
@@ -353,16 +355,23 @@ export async function updateMailSettings(
       fields,
     )
 
-    try {
-      const url = new URL(host)
-      if (url.protocol !== 'https:')
-        fields['mailtrap.host'] = 'Mailtrap API requests must use HTTPS.'
-    }
-    catch {
-      fields['mailtrap.host'] = 'Enter a valid Mailtrap API URL.'
+    // Both optional, as in the driver: an inbox id captures mail in that
+    // sandbox inbox, no inbox id delivers it through the Sending API, and a
+    // blank host means Mailtrap's own host for whichever of the two it is.
+    if (host) {
+      try {
+        const url = new URL(host)
+        if (url.protocol !== 'https:')
+          fields['mailtrap.host'] = 'Mailtrap API requests must use HTTPS.'
+        else if (/sandbox\.api\.mailtrap\.io$/i.test(url.hostname) && !inboxId)
+          fields['mailtrap.inboxId'] = 'The Mailtrap sandbox needs the inbox ID to capture into. Leave the host blank to deliver mail instead.'
+      }
+      catch {
+        fields['mailtrap.host'] = 'Enter a valid Mailtrap API URL.'
+      }
     }
-    if (!/^\d+$/.test(inboxId) || Number(inboxId) < 1)
-      fields['mailtrap.inboxId'] = 'Enter a positive Mailtrap inbox ID.'
+    if (inboxId && (!/^\d+$/.test(inboxId) || Number(inboxId) < 1))
+      fields['mailtrap.inboxId'] = 'Enter a positive Mailtrap inbox ID, or leave it blank to deliver mail.'
     if (!token && input.mailtrap?.clearToken !== true && !configured(currentEntries.MAILTRAP_TOKEN))
       fields['mailtrap.token'] = 'Enter a Mailtrap API token.'
     if (input.mailtrap?.clearToken === true && !token)

package/app/Middleware/Auth.ts

@@ -2,22 +2,20 @@ import { Auth } from '@stacksjs/auth/authentication'
 import { authCookieName } from '@stacksjs/auth/cookie'
 import { sessionUser } from '@stacksjs/auth/session-auth'
 import { HttpError } from '@stacksjs/error-handling'
-import { Middleware } from '@stacksjs/router'
+import { Middleware, parseBearerToken } from '@stacksjs/router'
 
+/**
+ * The request's bearer token, read the way the CSRF check reads it: the
+ * scheme name is case-insensitive. This required exactly `Bearer `, so
+ * `bearer abc` carried no token here while CSRF treated the request as
+ * token-authenticated and exempt - and authentication then fell back to the
+ * session cookie, a cookie-authenticated request with CSRF skipped.
+ */
 function bearerToken(request: any): string | null {
-  if (typeof request.bearerToken === 'function') {
-    const token = request.bearerToken()
-    if (token)
-      return token
-  }
-
   const header
     = (typeof request.header === 'function' && request.header('authorization'))
       || request.headers?.get?.('authorization')
-      || request.headers?.get?.('Authorization')
-  return typeof header === 'string' && header.startsWith('Bearer ')
-    ? header.slice(7)
-    : null
+  return parseBearerToken(typeof header === 'string' ? header : null)
 }
 
 async function stampTokenUser(request: any, token: string): Promise<void> {

package/app/Middleware/Cors.ts

@@ -55,9 +55,10 @@ import { Middleware } from '@stacksjs/router'
  * **Credentials safety**
  *
  * When `credentials: true`, the spec forbids `Access-Control-Allow-Origin: *`.
- * In that case we echo the request's Origin (only if it matches the
- * configured allow-list) or omit the header entirely — never `*`. This
- * prevents the most common credentials-bypass misconfiguration.
+ * In that case we echo the request's Origin only when it is on an explicit
+ * allow-list (or a predicate accepts it), and omit the header otherwise -
+ * never `*`. A wildcard policy with credentials allows no origin at all,
+ * since reflecting every Origin would hand any site credentialed access.
  *
  * @example
  * ```ts
@@ -147,8 +148,18 @@ function computeAllowOrigin(
   if (!isOriginAllowed(requestOrigin, cfg.origin))
     return null
 
+  // A wildcard policy with credentials allows no origin. The spec forbids
+  // `*` beside `Allow-Credentials`, and echoing the request's Origin instead -
+  // what this did - grants every site on the internet credentialed access:
+  // any page could read a signed-in user's API responses. Name the origins
+  // that may send credentials, or turn credentials off.
+  if (cfg.credentials && cfg.origin === '*') {
+    warnWildcardWithCredentials()
+    return null
+  }
+
   // Credentials mode forbids the literal `*` per the CORS spec — browsers
-  // reject the response if both are present. Echo the actual origin
+  // reject the response if both are present. Echo the matched origin
   // instead so the Allow-Credentials response is usable.
   if (cfg.credentials)
     return requestOrigin
@@ -161,6 +172,15 @@ function computeAllowOrigin(
   return requestOrigin
 }
 
+let warnedWildcardWithCredentials = false
+
+function warnWildcardWithCredentials(): void {
+  if (warnedWildcardWithCredentials)
+    return
+  warnedWildcardWithCredentials = true
+  console.warn('[cors] `origin: \'*\'` with `credentials: true` allows no cross-origin request: list the origins that may send credentials in config/cors.ts, or set credentials to false.')
+}
+
 /**
  * Append a token to a comma-separated header value if not already present
  * (case-insensitive). Returns the new header value.
@@ -184,6 +204,21 @@ function appendVary(existing: string | null, token: string): string {
  *   throw buildPreflightResponse(request, resolveCorsConfig())
  * ```
  */
+/**
+ * Which of the headers a preflight asks for the policy allows: those named in
+ * `allowedHeaders` (case-insensitively), or all of them when it holds `*`.
+ * With nothing requested, the configured list.
+ */
+function allowedRequestHeaders(requested: string | null, cfg: ResolvedCorsConfig): string[] {
+  const wanted = (requested ?? '').split(',').map(header => header.trim()).filter(Boolean)
+  if (wanted.length === 0)
+    return cfg.allowedHeaders.filter(header => header !== '*')
+  if (cfg.allowedHeaders.includes('*'))
+    return wanted
+  const allowed = new Set(cfg.allowedHeaders.map(header => header.toLowerCase()))
+  return wanted.filter(header => allowed.has(header.toLowerCase()))
+}
+
 export function buildPreflightResponse(request: Request, cfg: ResolvedCorsConfig): Response {
   const headers = new Headers()
   const requestOrigin = request.headers.get('origin')
@@ -196,7 +231,8 @@ export function buildPreflightResponse(request: Request, cfg: ResolvedCorsConfig
   // shared caches don't blend two clients' answers.
   headers.set('Vary', 'Origin, Access-Control-Request-Method, Access-Control-Request-Headers')
 
-  if (cfg.credentials)
+  // Credentials are offered only to an origin that is allowed.
+  if (cfg.credentials && allowOrigin !== null)
     headers.set('Access-Control-Allow-Credentials', 'true')
 
   // Echo the requested method if it's in our allow-list; otherwise advertise
@@ -209,13 +245,13 @@ export function buildPreflightResponse(request: Request, cfg: ResolvedCorsConfig
       : cfg.methods
   headers.set('Access-Control-Allow-Methods', methods.join(', '))
 
-  // Echo the requested headers (typically lowercase) — the browser sends
-  // them and the spec allows us to reflect rather than enumerate.
-  const requestedHeaders = request.headers.get('access-control-request-headers')
-  if (requestedHeaders)
-    headers.set('Access-Control-Allow-Headers', requestedHeaders)
-  else if (cfg.allowedHeaders.length > 0)
-    headers.set('Access-Control-Allow-Headers', cfg.allowedHeaders.join(', '))
+  // The requested headers the policy allows. Every requested header used to
+  // be echoed back, so `allowedHeaders` allowed everything: a page could send
+  // any custom header it liked. A `*` entry still allows any header, which
+  // the spec honours only without credentials.
+  const allowedHeaders = allowedRequestHeaders(request.headers.get('access-control-request-headers'), cfg)
+  if (allowedHeaders.length > 0)
+    headers.set('Access-Control-Allow-Headers', allowedHeaders.join(', '))
 
   if (cfg.maxAge > 0)
     headers.set('Access-Control-Max-Age', String(cfg.maxAge))
@@ -248,7 +284,7 @@ export function applyCorsHeaders(request: Request, response: Response, cfg?: Res
     if (allowOrigin !== null)
       response.headers.set('Access-Control-Allow-Origin', allowOrigin)
     response.headers.set('Vary', appendVary(response.headers.get('Vary'), 'Origin'))
-    if (config.credentials)
+    if (config.credentials && allowOrigin !== null)
       response.headers.set('Access-Control-Allow-Credentials', 'true')
     if (config.exposedHeaders.length > 0)
       response.headers.set('Access-Control-Expose-Headers', config.exposedHeaders.join(', '))
@@ -262,7 +298,7 @@ export function applyCorsHeaders(request: Request, response: Response, cfg?: Res
   if (allowOrigin !== null)
     newHeaders.set('Access-Control-Allow-Origin', allowOrigin)
   newHeaders.set('Vary', appendVary(newHeaders.get('Vary'), 'Origin'))
-  if (config.credentials)
+  if (config.credentials && allowOrigin !== null)
     newHeaders.set('Access-Control-Allow-Credentials', 'true')
   if (config.exposedHeaders.length > 0)
     newHeaders.set('Access-Control-Expose-Headers', config.exposedHeaders.join(', '))

package/app/Middleware/Csrf.ts

@@ -1,7 +1,7 @@
 import { timingSafeEqual } from 'node:crypto'
 import { HttpError } from '@stacksjs/error-handling/http-error'
 import type { EnhancedRequest } from '@stacksjs/router'
-import { Middleware } from '@stacksjs/router/middleware'
+import { Middleware, parseBearerToken } from '@stacksjs/router/middleware'
 
 /**
  * CSRF Protection Middleware (default-on for unsafe methods)
@@ -203,11 +203,11 @@ export function seedCsrfCookieIfMissing(req: Request, response: Response, minted
   // has already embedded it in every form it drew. Generating a second token
   // here would store one string in the browser while the page carries another,
   // which fails in a way indistinguishable from having no token at all.
-  if (!minted) {
-    const cookieHeader = req.headers.get('cookie') || ''
-    if (cookieHeader.includes(`${CSRF_COOKIE_NAME}=`) || cookieHeader.includes('csrf-token='))
-      return response
-  }
+  // By the cookie's exact name (`csrfCookieToken` parses the jar): a
+  // substring test counted NextAuth's `next-auth.csrf-token` as ours, so the
+  // real cookie was never set and every form post failed.
+  if (!minted && csrfCookieToken(req) !== '')
+    return response
 
   // A token already on its way to the browser counts as present, exactly like
   // one in the request. Something upstream can mint before the render - the
@@ -318,8 +318,9 @@ function safeEqual(a: string, b: string): boolean {
  * an ambient cookie credential, so cross-site forgery doesn't apply).
  */
 function hasBearerToken(req: Request): boolean {
-  const auth = req.headers.get('authorization')
-  return typeof auth === 'string' && /^bearer /i.test(auth)
+  // The same parser Auth uses, so a request is exempt here exactly when Auth
+  // will authenticate it by that token rather than by its cookie.
+  return parseBearerToken(req.headers.get('authorization')) !== null
 }
 
 /**

package/functions/buddy-chat.ts

@@ -6,8 +6,13 @@ export interface BuddyChatMessage {
 }
 
 export interface BuddyChatState {
-  provider: 'anthropic' | 'openai' | 'ollama'
+  /** `null` when config/ai.ts names a provider Stacks has no driver for. */
+  provider: 'anthropic' | 'openai' | 'ollama' | 'bedrock' | null
   configured: boolean
+  /** Why Buddy cannot answer yet. */
+  problem: string | null
+  /** The environment key that would configure the provider, when one would. */
+  missingKey: string | null
   history: BuddyChatMessage[]
   repository: {
     name: string
@@ -18,7 +23,7 @@ export interface BuddyChatState {
 
 export interface BuddyChatResponse {
   content: string
-  provider: BuddyChatState['provider']
+  provider: NonNullable<BuddyChatState['provider']>
   model: string
   usage: {
     promptTokens: number

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.72",
+  "version": "0.75.74",
   "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.72",
+  "version": "0.75.74",
   "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.72",
-    "@stacksjs/sanitizer": "^0.2.348",
+    "@stacksjs/mobile": "^0.75.74",
+    "@stacksjs/sanitizer": "^0.2.374",
     "ts-qr-codes": "^0.1.8"
   }
 }

package/resources/components/Dashboard/Buddy/BuddyAssistant.stx

@@ -18,6 +18,8 @@ function providerName(): string {
     return 'Anthropic'
   if (provider === 'ollama')
     return 'Ollama'
+  if (provider === 'bedrock')
+    return 'Amazon Bedrock'
   return 'AI provider'
 }
 
@@ -108,10 +110,10 @@ onMount(() => {
       <div>
         <h2 class="font-semibold text-amber-900 dark:text-amber-200">Configure {{ providerName() }}</h2>
         <p class="mt-1 text-amber-800 text-sm dark:text-amber-300">
-          Add the provider key to your environment, then restart the dashboard. Secrets remain server-side and are never returned to this page.
+          {{ chatState()?.problem }} Secrets remain server-side and are never returned to this page.
         </p>
-        <code class="inline-block mt-3 px-2 py-1 font-mono text-amber-900 text-xs dark:text-amber-200 bg-amber-100 dark:bg-amber-950 rounded">
-          {{ chatState()?.provider === 'openai' ? 'OPENAI_API_KEY' : 'ANTHROPIC_API_KEY' }}
+        <code :if="chatState()?.missingKey" class="inline-block mt-3 px-2 py-1 font-mono text-amber-900 text-xs dark:text-amber-200 bg-amber-100 dark:bg-amber-950 rounded">
+          {{ chatState()?.missingKey }}
         </code>
         <StxLink to="/environment" class="inline-flex items-center ml-3 font-medium text-amber-800 text-sm dark:text-amber-300">
           Open environment

package/resources/components/Dashboard/Settings/MailSettingsDashboard.stx

@@ -83,7 +83,7 @@ const mailgunApiKey = state('')
 const mailgunApiKeyConfigured = state(false)
 const clearMailgunApiKey = state(false)
 
-const mailtrapHost = state('https://sandbox.api.mailtrap.io/api/send')
+const mailtrapHost = state('')
 const mailtrapInboxId = state('')
 const mailtrapToken = state('')
 const mailtrapTokenConfigured = state(false)
@@ -152,9 +152,11 @@ const driverReady = derived(() => {
       && (mailgunApiKeyConfigured() || mailgunApiKey()),
     )
   if (driver() === 'mailtrap') {
+    // Host and inbox are optional: no inbox delivers through the Sending API.
+    // Only a sandbox host needs one, since the sandbox captures into an inbox.
+    const sandbox = /sandbox\.api\.mailtrap\.io/i.test(mailtrapHost())
     return Boolean(
-      mailtrapHost()
-      && mailtrapInboxId()
+      (!sandbox || mailtrapInboxId())
       && (mailtrapTokenConfigured() || mailtrapToken()),
     )
   }
@@ -464,13 +466,13 @@ onMount(() => void loadSettings())
     <section :if="driver() === 'mailtrap'" class="p-5 bg-white dark:bg-neutral-900 border border-stone-200 rounded-xl dark:border-neutral-700">
       <div class="mb-5">
         <h2 class="font-semibold text-stone-900 dark:text-white">Mailtrap</h2>
-        <p class="mt-1 text-sm text-stone-500 dark:text-neutral-400">Use the HTTPS API endpoint, inbox ID, and write-only bearer token.</p>
+        <p class="mt-1 text-sm text-stone-500 dark:text-neutral-400">With an inbox ID, mail is captured in that testing inbox. Without one, it is delivered through the Sending API.</p>
       </div>
       <div class="grid gap-4 md:grid-cols-2">
         <div class="md:col-span-2">
-          <Input v-model:value="mailtrapHost" type="url" label="API base URL" placeholder="https://sandbox.api.mailtrap.io/api/send" required :error="fieldError('mailtrap.host')" />
+          <Input v-model:value="mailtrapHost" type="url" label="API base URL (optional)" placeholder="Mailtrap's own host" :error="fieldError('mailtrap.host')" />
         </div>
-        <Input v-model:value="mailtrapInboxId" label="Inbox ID" placeholder="123456" required :error="fieldError('mailtrap.inboxId')" />
+        <Input v-model:value="mailtrapInboxId" label="Testing inbox ID (optional)" placeholder="123456" :error="fieldError('mailtrap.inboxId')" />
         <Input
           v-model:value="mailtrapToken"
           type="password"

package/resources/components/NativeAppShell.stx

@@ -76,6 +76,12 @@ const shellClass = derived(() => `${nativeMobile() ? 'native-mobile ' : ''}${cla
     padding-left: var(--native-safe-area-left);
   }
 
+  /* iOS zooms the page into a text field smaller than 16px when it takes
+     focus, and inside an app nothing zooms it back out: the whole screen
+     stayed magnified and shifted sideways after typing a comment. A field in
+     the shell is never smaller than that. */
+  .native-app-shell :is(input, textarea, select) { font-size: max(16px, 1em); }
+
   .native-app-shell::before {
     content: '';
     position: fixed;
@@ -142,6 +148,20 @@ const shellClass = derived(() => `${nativeMobile() ? 'native-mobile ' : ''}${cla
     padding-bottom: var(--native-safe-area-bottom);
   }
 
+  /* While the keyboard is up, the tab bar steps aside, as iOS does: left in
+     place it rode up on top of the keyboard and took a fifth of the screen
+     from whatever was being typed. Hidden rather than removed, so the
+     content's clearance below stays and nothing jumps when it comes back. */
+  .native-app-shell.native-mobile:has(:is(input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=submit], [type=file]), textarea, select, [contenteditable=true]):focus) .native-app-tab-slot {
+    visibility: hidden;
+  }
+
+  @media (max-width: 767.98px) and (pointer: coarse) {
+    .native-app-shell:has(:is(input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=submit], [type=file]), textarea, select, [contenteditable=true]):focus) .native-app-tab-slot {
+      visibility: hidden;
+    }
+  }
+
   /* A phone app does not select its chrome on a long press, or flash it grey
      on a tap. Text inside the content is left selectable. */
   .native-app-shell.native-mobile .native-app-tab-slot,

package/resources/components/NativeComponents.test.ts

@@ -40,6 +40,27 @@ describe('Native components', () => {
     expect(bar).toContain("useReactiveProp<string>('title', '')")
   })
 
+  it('steps the tab bar aside while the keyboard is up', () => {
+    const shell = read('NativeAppShell')
+    expect(shell).toContain('textarea, select, [contenteditable=true]):focus) .native-app-tab-slot')
+    expect(shell).toContain('visibility: hidden;')
+  })
+
+  it('keeps every text field big enough that iOS does not zoom into it', () => {
+    expect(read('NativeAppShell')).toContain('.native-app-shell :is(input, textarea, select) { font-size: max(16px, 1em); }')
+  })
+
+  it('keeps the tab a screen was opened from lit', () => {
+    expect(read('NativeTabBar')).toContain('data-stx-sticky-active')
+  })
+
+  it('names the screen the back button returns to, and gives way to the title', () => {
+    const bar = read('NativeNavBar')
+    expect(bar).toContain('enterNavTrail(navTrail(), window.location.pathname + window.location.search)')
+    expect(bar).toContain('@container (max-width: 4.5rem)')
+    expect(bar).toContain("useReactiveProp<boolean>('titleOnScroll', false)")
+  })
+
   it('lifts an open sheet out of the router\'s stacking context', () => {
     const sheet = read('NativeSheet')
     expect(sheet).toContain('main:has(.native-sheet.is-open) { view-transition-name: none; }')

package/resources/components/NativeNavBar.stx

@@ -7,28 +7,51 @@ interface NativeNavBarProps {
   backLabel?: string
   /** `false` for a pushed screen: the title sits in the bar from the start. */
   large?: boolean
+  /**
+   * For a pushed screen that draws its own heading: the bar leaves the title
+   * out until that heading has scrolled away, rather than showing it twice.
+   */
+  titleOnScroll?: boolean
 }
 
 const { title = '', back = '', backLabel = 'Back', large = true } = defineProps<NativeNavBarProps>()
 </script>
 
 <script client>
-import { goBack, haptics, observePageScroll } from '@stacksjs/mobile'
+import { backLabelFor, canGoBack, enterNavTrail, goBack, haptics, navTrail, observePageScroll } from '@stacksjs/mobile'
 
 const isLarge = useReactiveProp<boolean>('large', true)
+const onScroll = useReactiveProp<boolean>('titleOnScroll', false)
 // Reactive, so a screen whose name arrives with its data can pass it in.
 const navTitle = useReactiveProp<string>('title', '')
 const scrolled = state(false)
 let stopScroll: (() => void) | null = null
 
+// The back button names the screen it returns to, as on iOS: the one the app
+// actually came from, which a fixed label cannot know (a workout opened from
+// Today is not going back to the calendar). Each bar records its screen's
+// name on the window's trail of screens.
+const fallbackLabel = useReactiveProp<string>('backLabel', 'Back')
+const previousTitle = state('')
+const backText = derived(() => backLabelFor({ path: '', title: previousTitle() }, fallbackLabel()))
+let here: { path: string, title: string } | null = null
+effect(() => {
+  const name = navTitle()
+  if (here) here.title = name
+})
+
 onMount(() => {
   // The large title is about 44px tall; past it, its name belongs in the bar.
   stopScroll = observePageScroll(offset => scrolled.set(offset > 40))
+  const { current, previous } = enterNavTrail(navTrail(), window.location.pathname + window.location.search)
+  here = current
+  current.title = navTitle()
+  if (previous && canGoBack()) previousTitle.set(previous.title)
 })
 onDestroy(() => stopScroll?.())
 
 const barClass = derived(() => {
-  const collapsed = !isLarge() || scrolled()
+  const collapsed = (!isLarge() && !onScroll()) || scrolled()
   return `native-nav-bar${collapsed ? ' is-collapsed' : ''}${scrolled() ? ' is-scrolled' : ''}`
 })
 
@@ -44,9 +67,9 @@ function tapBack(event: MouseEvent): void {
   <header :class="barClass()">
     <div class="native-nav-side">
       @if(back)
-        <a href="{{ back }}" class="native-nav-back" aria-label="{{ backLabel }}" draggable="false" @click="tapBack">
+        <a href="{{ back }}" class="native-nav-back" :aria-label="backText()" draggable="false" @click="tapBack">
           <i aria-hidden="true" class="i-lucide-chevron-left native-nav-back-icon"></i>
-          <span>{{ backLabel }}</span>
+          <span class="native-nav-back-label">{{ backText() }}</span>
         </a>
       @endif
       <slot name="leading" />
@@ -107,7 +130,10 @@ function tapBack(event: MouseEvent): void {
     background: var(--native-bar-background-dark, rgb(2 6 23 / 0.86));
   }
 
-  .native-nav-side { display: flex; gap: 0.25rem; align-items: center; min-width: 0; }
+  /* Each side is a container, so the back button can tell when its column is
+     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-title {
@@ -124,8 +150,12 @@ function tapBack(event: MouseEvent): void {
 
   .native-nav-bar.is-collapsed .native-nav-title { opacity: 1; transform: none; }
 
+  /* A title that is not showing takes no room from the sides either. */
+  .native-nav-bar:not(.is-collapsed) .native-nav-title { max-width: 0; }
+
   .native-nav-back {
     display: inline-flex;
+    max-width: 100%;
     gap: 0.1rem;
     align-items: center;
     min-height: 2.75rem;
@@ -139,7 +169,11 @@ function tapBack(event: MouseEvent): void {
 
   .dark .native-nav-back { color: var(--native-accent-dark, rgb(96 165 250)); }
   .native-nav-back:active { opacity: 0.55; }
-  .native-nav-back-icon { width: 1.6rem; height: 1.6rem; }
+  .native-nav-back-icon { flex-shrink: 0; width: 1.6rem; height: 1.6rem; }
+  .native-nav-back-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  @container (max-width: 4.5rem) {
+    .native-nav-back-label { display: none; }
+  }
 
   .native-nav-large-title.is-empty { display: none; }
 

package/resources/components/NativeTabBar.stx

@@ -14,7 +14,10 @@ function selectTab(): void {
 }
 </script>
 
-<nav aria-label="{{ label }}" class="native-tab-bar" @click="selectTab()">
+<!-- `data-stx-sticky-active`: each tab owns the screens opened from it, as on
+     iOS, so a workout opened from Today keeps Today lit; a tab's `match`
+     decides only for a screen reached with no tab current yet (a deep link). -->
+<nav aria-label="{{ label }}" class="native-tab-bar" data-stx-sticky-active @click="selectTab()">
   <slot />
 </nav>
 

package/resources/components/NativeTabItem.stx

@@ -6,9 +6,10 @@ interface NativeTabItemProps {
   /** A count on the icon. Zero and empty draw nothing. */
   badge?: string | number
   /**
-   * More paths that belong to this tab, space-separated: a workout opened from
-   * the calendar keeps the Calendar tab lit. A tab bar is a <nav>, where a
-   * link is otherwise current only on its own page.
+   * More paths that belong to this tab, space-separated, for a screen
+   * reached with no tab current yet: a deep link to a workout lights the
+   * Calendar tab. Opened from a tab, a screen keeps that tab lit instead
+   * (the tab bar's sticky nav).
    */
   match?: string
 }