@stacksjs/defaults 0.75.92 → 0.75.93

package/app/Actions/Dashboard/Kanban/BoardDestroyAction.ts

@@ -1,14 +1,16 @@
 import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions/runtime'
 import { db, getDatabaseDialect, sqlHelpers } from '@stacksjs/database/runtime'
+import { removeCardAttachments, storageDisks } from './card-attachments'
 import { kanbanActionError, kanbanError } from './kanban-response'
 
 /**
  * `DELETE /api/dashboard/kanban/boards/:id`.
  *
  * Hard delete with cascade: removes the board, its columns, its cards,
- * its labels, and the relevant pivot rows in `card_labels` and
- * `card_assignees`. No DB-level FK cascade to lean on — the existing
+ * its labels, the relevant pivot rows in `card_labels` and
+ * `card_assignees`, the cards' attachments (files and rows), and the
+ * feedback links issued for the board. No DB-level FK cascade to lean on — the existing
  * Stacks migration convention is app-layer integrity, so the cascade
  * lives in this action.
  *
@@ -31,11 +33,18 @@ export default new Action({
     }
 
     try {
+      const openDisk = await storageDisks()
       await db.transaction(async (rawTrx) => {
         const qb = rawTrx as unknown as typeof db
         // Postgres numbers its parameters, so the `?` these carried bound
         // nothing there (stacksjs/stacks#2846).
         const { param } = sqlHelpers(getDatabaseDialect())
+        // Attachments first, files and rows (stacksjs/stacks#2881), so a disk
+        // that refuses leaves every card here whole.
+        await removeCardAttachments(qb, {
+          sql: `card_id IN (SELECT id FROM cards WHERE board_id = ${param(1)})`,
+          params: [id],
+        }, openDisk)
         // Pivots + card-scoped children first — they reference cards.
         await qb.unsafe(
           `DELETE FROM card_labels WHERE card_id IN (SELECT id FROM cards WHERE board_id = ${param(1)})`,
@@ -53,6 +62,9 @@ export default new Action({
         ).execute()
         // Cards (denormalised board_id avoids the column join).
         await qb.deleteFrom('cards').where('board_id', '=', id).execute()
+        // Feedback links name this board. Left behind they are tokens for a
+        // board that no longer exists, each carrying who it was issued to.
+        await qb.deleteFrom('feedback_tokens').where('board_id', '=', id).execute()
         // Columns + labels — both directly reference board_id.
         await qb.deleteFrom('board_columns').where('board_id', '=', id).execute()
         await qb.deleteFrom('labels').where('board_id', '=', id).execute()

package/app/Actions/Dashboard/Kanban/CardDestroyAction.ts

@@ -1,14 +1,16 @@
 import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions/runtime'
-import { db } from '@stacksjs/database/runtime'
+import { db, getDatabaseDialect, sqlHelpers } from '@stacksjs/database/runtime'
+import { removeCardAttachments, storageDisks } from './card-attachments'
 import { kanbanActionError, kanbanError } from './kanban-response'
 
 /**
  * `DELETE /api/dashboard/kanban/cards/:id`.
  *
  * Hard-deletes a card and clears its pivot rows in `card_labels` /
- * `card_assignees`. The columns and board are untouched — only the
- * single card row + its pivot dependencies go.
+ * `card_assignees`, its comments, and its attachments - the files on the
+ * disk as well as their rows (stacksjs/stacks#2881). The columns and board
+ * are untouched — only the single card row + its dependencies go.
  *
  * Soft-archive (the more common ask) is a PATCH with
  * `{ archived: true }` — the card stays in the DB but drops out of
@@ -26,8 +28,12 @@ export default new Action({
     }
 
     try {
+      const openDisk = await storageDisks()
       await db.transaction(async (rawTrx) => {
         const qb = rawTrx as unknown as typeof db
+        const { param } = sqlHelpers(getDatabaseDialect())
+        // First, so a disk that refuses leaves the card whole.
+        await removeCardAttachments(qb, { sql: `card_id = ${param(1)}`, params: [id] }, openDisk)
         await qb.deleteFrom('card_labels').where('card_id', '=', id).execute()
         await qb.deleteFrom('card_assignees').where('card_id', '=', id).execute()
         // Card comments are card-scoped children.

package/app/Actions/Dashboard/Kanban/ColumnDestroyAction.ts

@@ -1,13 +1,15 @@
 import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions/runtime'
 import { db, getDatabaseDialect, sqlHelpers } from '@stacksjs/database/runtime'
+import { removeCardAttachments, storageDisks } from './card-attachments'
 import { kanbanActionError, kanbanError } from './kanban-response'
 
 /**
  * `DELETE /api/dashboard/kanban/columns/:id`.
  *
  * Hard-deletes the column and cascade-cleans every card inside it
- * (plus the pivot rows referencing those cards). Same convention as
+ * (plus the pivot rows referencing those cards, and their attachments,
+ * files included). Same convention as
  * BoardDestroyAction — Stacks doesn't lean on DB-level FK cascade, so
  * the cascade lives in this action.
  *
@@ -27,11 +29,18 @@ export default new Action({
     }
 
     try {
+      const openDisk = await storageDisks()
       await db.transaction(async (rawTrx) => {
         const qb = rawTrx as unknown as typeof db
         // Postgres numbers its parameters, so the `?` these carried bound
         // nothing there (stacksjs/stacks#2846).
         const { param } = sqlHelpers(getDatabaseDialect())
+        // Attachments first, files and rows (stacksjs/stacks#2881), so a disk
+        // that refuses leaves every card here whole.
+        await removeCardAttachments(qb, {
+          sql: `card_id IN (SELECT id FROM cards WHERE column_id = ${param(1)})`,
+          params: [id],
+        }, openDisk)
         await qb.unsafe(
           `DELETE FROM card_labels WHERE card_id IN (SELECT id FROM cards WHERE column_id = ${param(1)})`,
           [id],

package/app/Actions/Dashboard/Kanban/card-attachments.test.ts

@@ -1,7 +1,10 @@
-import { afterAll, afterEach, describe, expect, it, spyOn } from 'bun:test'
-import { readFileSync } from 'node:fs'
+import { afterAll, afterEach, beforeEach, describe, expect, it, spyOn } from 'bun:test'
+import { Database } from 'bun:sqlite'
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
 import { join } from 'node:path'
-import { CARD_ATTACHMENT_URL_TTL_SECONDS, shapeCardAttachment, signCardAttachmentUrl } from './card-attachments'
+import { createLocalStorage } from '@stacksjs/storage'
+import { CARD_ATTACHMENT_URL_TTL_SECONDS, removeCardAttachments, shapeCardAttachment, signCardAttachmentUrl } from './card-attachments'
 
 const row = {
   id: 7,
@@ -101,6 +104,117 @@ describe('signing one attachment', () => {
   })
 })
 
+/**
+ * stacksjs/stacks#2881. Deleting a card, column or board removed the card rows
+ * and left every screenshot on the disk, with an orphaned row pointing at it.
+ * Asserting the row is gone is what made that look done, so these assert the
+ * bytes: a real SQLite table and a real local disk.
+ */
+describe('removing a card\'s attachments', () => {
+  let dir = ''
+  let sqlite: Database
+  const disk = () => createLocalStorage({ root: join(dir, 'disk') })
+  const runner = {
+    unsafe: (sql: string, params: unknown[] = []) => ({
+      execute: async () => sqlite.query(sql).all(...(params as never[])),
+    }),
+  }
+
+  function attach(id: number, cardId: number, path: string): void {
+    mkdirSync(join(dir, 'disk', path, '..'), { recursive: true })
+    writeFileSync(join(dir, 'disk', path), 'a picture of somebody\'s screen')
+    sqlite.query('INSERT INTO card_attachments (id, card_id, disk, path) VALUES (?, ?, ?, ?)').run(id, cardId, 'local', path)
+  }
+  const onDisk = (path: string) => existsSync(join(dir, 'disk', path))
+  const rowsFor = (cardId: number) => sqlite.query('SELECT id FROM card_attachments WHERE card_id = ?').all(cardId).length
+
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'card-attachments-'))
+    sqlite = new Database(':memory:')
+    sqlite.run('CREATE TABLE card_attachments (id INTEGER PRIMARY KEY, card_id INTEGER, disk TEXT, path TEXT)')
+  })
+  afterEach(() => {
+    sqlite.close()
+    rmSync(dir, { recursive: true, force: true })
+  })
+
+  it('deletes the bytes and the rows of the cards it is given, and no others', async () => {
+    attach(1, 42, 'feedback/42/a.png')
+    attach(2, 42, 'feedback/42/b.png')
+    attach(3, 7, 'feedback/7/c.png')
+
+    const removed = await removeCardAttachments(runner, { sql: 'card_id = ?', params: [42] }, () => disk())
+
+    expect(removed).toBe(2)
+    expect(onDisk('feedback/42/a.png')).toBe(false)
+    expect(onDisk('feedback/42/b.png')).toBe(false)
+    expect(rowsFor(42)).toBe(0)
+    expect(onDisk('feedback/7/c.png')).toBe(true)
+    expect(rowsFor(7)).toBe(1)
+  })
+
+  it('opens the disk each row names', async () => {
+    attach(1, 42, 'feedback/42/a.png')
+    const asked: string[] = []
+    await removeCardAttachments(runner, { sql: 'card_id = ?', params: [42] }, (name) => {
+      asked.push(name)
+      return disk()
+    })
+    expect(asked).toEqual(['local'])
+  })
+
+  it('treats a file that is already gone as deleted, so a second run finishes', async () => {
+    attach(1, 42, 'feedback/42/a.png')
+    rmSync(join(dir, 'disk', 'feedback/42/a.png'))
+
+    expect(await removeCardAttachments(runner, { sql: 'card_id = ?', params: [42] }, () => disk())).toBe(1)
+    expect(rowsFor(42)).toBe(0)
+  })
+
+  it('touches no row when a disk refuses, so the rows still say where the files are', async () => {
+    attach(1, 42, 'feedback/42/a.png')
+    attach(2, 42, 'feedback/42/b.png')
+
+    const run = removeCardAttachments(runner, { sql: 'card_id = ?', params: [42] }, () => ({
+      deleteFile: async () => { throw new Error('S3 is unreachable') },
+    }))
+
+    await expect(run).rejects.toThrow('could not delete attachment 1 (local:feedback/42/a.png), so nothing was deleted: S3 is unreachable')
+    expect(rowsFor(42)).toBe(2)
+  })
+
+  it('is a no-op for a card with no attachments', async () => {
+    let opened = false
+    const removed = await removeCardAttachments(runner, { sql: 'card_id = ?', params: [42] }, () => {
+      opened = true
+      return disk()
+    })
+    expect(removed).toBe(0)
+    expect(opened).toBe(false)
+  })
+})
+
+describe('the destroy actions', () => {
+  const source = (file: string) => readFileSync(join(import.meta.dir, file), 'utf8')
+
+  for (const [file, scope] of [['CardDestroyAction.ts', 'card_id = '], ['ColumnDestroyAction.ts', 'WHERE column_id = '], ['BoardDestroyAction.ts', 'WHERE board_id = ']] as const) {
+    it(`${file} removes attachments, files included, before any card row`, () => {
+      const text = source(file)
+      const removal = text.indexOf('await removeCardAttachments(qb,')
+      expect(removal).toBeGreaterThan(-1)
+      expect(text.slice(removal, removal + 200)).toContain(scope)
+      // Inside the transaction, ahead of every delete, so a refusing disk
+      // rolls the whole thing back.
+      expect(removal).toBeGreaterThan(text.indexOf('await db.transaction('))
+      expect(removal).toBeLessThan(text.indexOf('DELETE FROM') === -1 ? text.indexOf('deleteFrom(') : Math.min(text.indexOf('DELETE FROM'), text.indexOf('deleteFrom(')))
+    })
+  }
+
+  it('BoardDestroyAction removes the board\'s feedback links', () => {
+    expect(source('BoardDestroyAction.ts')).toContain(`deleteFrom('feedback_tokens').where('board_id', '=', id)`)
+  })
+})
+
 describe('the card dialog', () => {
   const dialog = readFileSync(
     join(import.meta.dir, '../../../../resources/components/Dashboard/Kanban/KanbanCardDialog.stx'),

package/app/Actions/Dashboard/Kanban/card-attachments.ts

@@ -105,3 +105,62 @@ export async function signCardAttachmentUrl(
     return null
   }
 }
+
+/** What `removeCardAttachments` runs its two statements through: `db`, or a transaction. */
+export interface AttachmentStatementRunner {
+  unsafe: (sql: string, params?: unknown[]) => { execute: () => Promise<unknown> }
+}
+
+/**
+ * Remove every attachment of the cards `cardsWhere` selects: the bytes, then the rows.
+ *
+ * Deleting a card, a column or a board used to leave both behind. The cascade
+ * those actions run lives in the application, not in a foreign key (SQLite
+ * does not enforce one unless asked), and none of them knew about
+ * `card_attachments`. So every screenshot on a deleted card stayed on the disk
+ * with a row pointing at it that nothing could reach (stacksjs/stacks#2881).
+ * A feedback screenshot is a picture of a stranger's screen, which is exactly
+ * what a deletion is supposed to remove.
+ *
+ * Bytes first, then rows, so it can be run again. A file already gone counts
+ * as deleted (that is `deleteFile`'s contract on every disk), and any other
+ * failure throws before a row is touched. Run inside the caller's transaction,
+ * that means a disk it cannot reach leaves the card exactly as it was, with
+ * every row still saying where its file is, rather than a card that is gone
+ * and a file nothing can find any more.
+ *
+ * `cardsWhere` is a predicate over `card_id`, for example
+ * `card_id IN (SELECT id FROM cards WHERE board_id = $1)`, with its params.
+ * Returns how many attachments went.
+ */
+export async function removeCardAttachments(
+  handle: AttachmentStatementRunner,
+  cardsWhere: { sql: string, params: unknown[] },
+  openDisk: (name: string) => Pick<StorageAdapter, 'deleteFile'>,
+): Promise<number> {
+  const rows = await handle.unsafe(
+    `SELECT id, disk, path FROM card_attachments WHERE ${cardsWhere.sql}`,
+    cardsWhere.params,
+  ).execute() as Array<Pick<CardAttachmentRow, 'id' | 'disk' | 'path'>>
+
+  if (!rows?.length)
+    return 0
+
+  for (const row of rows) {
+    try {
+      await openDisk(row.disk).deleteFile(row.path)
+    }
+    catch (err) {
+      throw new Error(`could not delete attachment ${row.id} (${row.disk}:${row.path}), so nothing was deleted: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  }
+
+  await handle.unsafe(`DELETE FROM card_attachments WHERE ${cardsWhere.sql}`, cardsWhere.params).execute()
+  return rows.length
+}
+
+/** The real disks, for `removeCardAttachments`. */
+export async function storageDisks(): Promise<(name: string) => Pick<StorageAdapter, 'deleteFile'>> {
+  const { Storage } = await import('@stacksjs/storage')
+  return name => Storage.disk(name as never)
+}

package/app/Models/CardAttachment.ts

@@ -25,13 +25,20 @@ import { schema } from '@stacksjs/validation/runtime'
  * stranger's upload landing under `public/` would be world-readable at a
  * path the dashboard also prints.
  *
- * ## Erasure removes the row, not yet the bytes
+ * ## Removing a screenshot removes the file
  *
- * The `gdpr` trait deletes this row, and a screenshot is likely to contain
- * personal data - it is a picture of somebody's screen. Deleting the row
- * leaves the file behind, because nothing here sweeps a disk. Stated rather
- * than implied, and tracked separately: a half-done erasure that looks done
- * is worse than one that says what it did.
+ * A screenshot is likely to contain personal data - it is a picture of
+ * somebody's screen - so deleting one has to delete the bytes, not only this
+ * row. The card, column and board destroy actions do both, file first, through
+ * `removeCardAttachments` (stacksjs/stacks#2881). They cannot lean on the
+ * cascade declared below, which SQLite does not enforce, and a row deleted
+ * without its file leaves bytes on the disk that nothing can find again.
+ *
+ * `buddy gdpr:erase` does not reach these rows, and the `gdpr` trait here is
+ * the processing-register entry rather than an erasure path. The submitter of
+ * a feedback card is not an account: the card is filed with no user, so no
+ * data subject's erasure can match it. An external reviewer's request is met
+ * by deleting the card they filed, which removes the screenshot with it.
  *
  * No `useApi`. These rows are written by the feedback intake action and read
  * by the dashboard's own board actions; a REST surface over them would

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.92",
+  "version": "0.75.93",
   "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.92",
+  "version": "0.75.93",
   "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.92",
+    "@stacksjs/mobile": "^0.75.93",
     "@stacksjs/sanitizer": "^0.2.395",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/NativeAppShell.stx

@@ -10,7 +10,7 @@ const { tabBar = false } = defineProps<NativeAppShellProps>()
 </script>
 
 <script client>
-import { deepLinks as deepLinkService, device, followDeepLinks, isNativeMobile, whenNativeMobile } from '@stacksjs/mobile'
+import { deepLinks as deepLinkService, device, followDeepLinks, isNativeMobile, splash, whenNativeMobile } from '@stacksjs/mobile'
 
 const className = useReactiveProp<string>('class', '')
 // A bare attribute arrives as an empty string.
@@ -23,6 +23,14 @@ onMount(() => {
 })
 onDestroy(() => stopDeepLinks?.())
 
+// Craft holds its launch splash over the page until the page is ready. The
+// first screen is: once it has painted (the second frame after mounting), the
+// splash fades and the app goes from launch to content with nothing blank in
+// between. Later screens call this too, which the shell ignores.
+onMount(() => {
+  requestAnimationFrame(() => requestAnimationFrame(() => splash.hide()))
+})
+
 // Asked twice on purpose. Craft installs its bridge after the document starts,
 // so on a phone the answer at setup is often `false`, and every rule hanging
 // off `.native-mobile` would never apply. whenNativeMobile() answers once the
@@ -124,6 +132,19 @@ const shellClass = derived(() => `${nativeMobile() ? 'native-mobile ' : ''}${cla
     padding-bottom: calc(5rem + var(--native-safe-area-bottom));
   }
 
+  /* In Craft's iOS shell the phone draws the tab bar natively, floating over
+     the page, and says how much of the screen it covers in
+     --craft-tab-bar-height. Content scrolls under it and clears it at the end. */
+  html[data-craft-chrome] .native-app-shell:has(.native-app-tab-slot) {
+    --native-tab-bar-height: var(--craft-tab-bar-height, 6rem);
+  }
+  html[data-craft-chrome] .native-app-shell:has(.native-app-tab-slot) .native-app-content {
+    padding-bottom: calc(var(--craft-tab-bar-height, 6rem) + 0.75rem);
+  }
+  html[data-craft-chrome] .native-app-shell:has([data-native-hide-tab-bar]) .native-app-content {
+    padding-bottom: var(--native-safe-area-bottom);
+  }
+
   .native-app-sticky-top {
     top: var(--native-safe-area-top);
   }

package/resources/components/NativeComponents.test.ts

@@ -14,6 +14,23 @@ describe('Native components', () => {
     expect(shell).toContain('followDeepLinks(path => navigate(path), deepLinkService)')
   })
 
+  it('hands the tab bar to the phone inside Craft, and draws the glass capsule elsewhere', () => {
+    const bar = read('NativeTabBar')
+    // The links stay as the native bar's model; the router keeps them current.
+    expect(bar).toContain('stopMirror = mirrorTabBar(nav)')
+    expect(bar).toContain('html[data-craft-chrome] .native-tab-bar { display: none; }')
+    expect(bar).toContain('border-radius: 999px;')
+    const item = read('NativeTabItem')
+    expect(item).toContain('data-native-tab="{{ label }}"')
+    expect(item).toContain('data-native-tab-symbol="{{ symbol }}"')
+    const shell = read('NativeAppShell')
+    expect(shell).toContain('padding-bottom: calc(var(--craft-tab-bar-height, 6rem) + 0.75rem);')
+  })
+
+  it('lifts the launch splash once the first screen has painted', () => {
+    expect(read('NativeAppShell')).toContain('requestAnimationFrame(() => requestAnimationFrame(() => splash.hide()))')
+  })
+
   it('keeps a tab lit on the paths it names, and never drags a tab', () => {
     const item = read('NativeTabItem')
     expect(item).toContain('activeMatch="{{ match }}"')

package/resources/components/NativeTabBar.stx

@@ -7,17 +7,32 @@ const { label = 'App navigation' } = defineProps<NativeTabBarProps>()
 </script>
 
 <script client>
-import { haptics } from '@stacksjs/mobile'
+import { haptics, mirrorTabBar } from '@stacksjs/mobile'
+
+// Inside Craft's iOS shell the phone draws this bar natively (Liquid Glass on
+// iOS 26 and later) and these links stay as its model: the router keeps the
+// current one marked, and a native tap comes back as a click on one of them.
+const bar = useRef('nativeTabBar')
+let mirrored = false
+let stopMirror: (() => void) | null = null
+onMount(() => {
+  const nav = bar.current as HTMLElement | null
+  if (!nav) return
+  stopMirror = mirrorTabBar(nav)
+  mirrored = stopMirror !== null
+})
+onDestroy(() => stopMirror?.())
 
 function selectTab(): void {
-  void haptics.selection()
+  // The native bar has already played its own.
+  if (!mirrored) void haptics.selection()
 }
 </script>
 
 <!-- `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()">
+<nav ref="nativeTabBar" aria-label="{{ label }}" class="native-tab-bar" data-stx-sticky-active @click="selectTab()">
   <slot />
 </nav>
 
@@ -28,18 +43,33 @@ function selectTab(): void {
      box steps aside, so the link is the grid item and centres in the bar. */
   .native-tab-bar > [data-stx-scope]:has(> .native-tab-item) { display: contents; }
 
+  /* The floating glass capsule iOS 26 draws, for a browser: inset from the
+     screen's edges, above the home indicator, the content showing through. */
   .native-tab-bar {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
-    min-height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
-    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
-    border-top: 1px solid rgb(148 163 184 / 0.22);
-    background: rgb(255 255 255 / 0.9);
-    backdrop-filter: blur(24px) saturate(160%);
-    -webkit-backdrop-filter: blur(24px) saturate(160%);
+    gap: 0.125rem;
+    max-width: 32rem;
+    min-height: 3.875rem;
+    margin: 0 max(1rem, env(safe-area-inset-right, 0px)) calc(0.375rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
+    padding: 0.25rem;
+    border: 1px solid rgb(255 255 255 / 0.55);
+    border-radius: 999px;
+    background: rgb(255 255 255 / 0.68);
+    box-shadow: 0 12px 32px -14px rgb(15 23 42 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.7);
+    backdrop-filter: blur(22px) saturate(180%);
+    -webkit-backdrop-filter: blur(22px) saturate(180%);
   }
 
+  @media (min-width: 34rem) {
+    .native-tab-bar { margin-right: auto; margin-left: auto; }
+  }
+
+  /* In Craft's iOS shell the phone draws the bar; this one stays in the
+     document, hidden, as the native one's model. */
+  html[data-craft-chrome] .native-tab-bar { display: none; }
+
   .native-tab-item {
     display: flex;
     flex-direction: column;
@@ -47,12 +77,13 @@ function selectTab(): void {
     align-items: center;
     justify-content: center;
     min-width: 2.75rem;
-    color: rgb(100 116 139);
+    border-radius: 999px;
+    color: rgb(15 23 42);
     font-size: 0.6875rem;
-    font-weight: 600;
+    font-weight: 500;
     line-height: 1;
     text-decoration: none;
-    transition: color 150ms ease, transform 150ms ease;
+    transition: color 150ms ease, background-color 200ms ease, transform 150ms ease;
     -webkit-tap-highlight-color: transparent;
     /* No link preview or callout on a long press: a tab is not a link to share. */
     -webkit-touch-callout: none;
@@ -75,16 +106,24 @@ function selectTab(): void {
   }
 
   .native-tab-item:active { transform: scale(0.96); }
-  .native-tab-item.is-active { color: var(--native-tab-active, rgb(5 150 105)); }
+  .native-tab-item.is-active {
+    color: var(--native-tab-active, rgb(15 23 42));
+    background: rgb(15 23 42 / 0.07);
+    font-weight: 600;
+  }
   .native-tab-icon { width: 1.35rem; height: 1.35rem; }
 
   .dark .native-tab-bar {
-    border-color: rgb(71 85 105 / 0.55);
-    background: rgb(15 23 42 / 0.9);
+    border-color: rgb(255 255 255 / 0.12);
+    background: rgb(30 41 59 / 0.62);
+    box-shadow: 0 12px 32px -14px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.08);
   }
 
-  .dark .native-tab-item { color: rgb(148 163 184); }
-  .dark .native-tab-item.is-active { color: var(--native-tab-active-dark, rgb(52 211 153)); }
+  .dark .native-tab-item { color: rgb(226 232 240); }
+  .dark .native-tab-item.is-active {
+    color: var(--native-tab-active-dark, rgb(255 255 255));
+    background: rgb(255 255 255 / 0.1);
+  }
 
   @media (prefers-reduced-transparency: reduce) {
     .native-tab-bar {

package/resources/components/NativeTabItem.stx

@@ -3,6 +3,12 @@ interface NativeTabItemProps {
   label: string
   href: string
   icon: string
+  /**
+   * The SF Symbol the phone's native tab bar draws for this tab, such as
+   * `calendar`; the current tab gets its `.fill` variant when there is one.
+   * `icon` is the web bar's.
+   */
+  symbol?: string
   /** A count on the icon. Zero and empty draw nothing. */
   badge?: string | number
   /**
@@ -14,7 +20,7 @@ interface NativeTabItemProps {
   match?: string
 }
 
-const { href, icon, label, badge = '', match = '' } = defineProps<NativeTabItemProps>()
+const { href, icon, label, symbol = 'circle', badge = '', match = '' } = defineProps<NativeTabItemProps>()
 const hasBadge = badge !== '' && badge !== 0 && badge !== '0'
 </script>
 
@@ -24,7 +30,9 @@ const hasBadge = badge !== '' && badge !== 0 && badge !== '0'
      the current one is idle, so switching tabs is served from the router's
      cache, as instant as a native tab bar. `data-stx-transition="none"`: and
      swapped without the router's cross-fade, which iOS never draws between
-     tabs (it read as a quarter-second lag on every tap). -->
+     tabs (it read as a quarter-second lag on every tap). `data-native-tab`
+     and `data-native-tab-symbol` describe the tab to the phone's native bar
+     (@stacksjs/mobile mirrorTabBar). -->
 <StxLink
   to="{{ href }}"
   aria-label="{{ label }}"
@@ -34,6 +42,8 @@ const hasBadge = badge !== '' && badge !== 0 && badge !== '0'
   draggable="false"
   data-stx-prefetch="eager"
   data-stx-transition="none"
+  data-native-tab="{{ label }}"
+  data-native-tab-symbol="{{ symbol }}"
 >
   <span class="native-tab-glyph">
     <i aria-hidden="true" class="{{ icon }} native-tab-icon"></i>

package/vcs/github/workflows/buddy-bot.yml

@@ -83,9 +83,9 @@ jobs:
           persist-credentials: true
 
       - name: Setup Pantry
-        uses: pantry-pm/pantry/packages/action@d899150a11cd12157ea360e21f6800a85f900446 # v0.11.71
+        uses: pantry-pm/pantry/packages/action@cdb82193cb344c2b881a88ea79f88243f5522e0f # v0.11.75
         with:
-          version: '0.11.71'
+          version: '0.11.75'
           install: 'false'
 
       - name: Install Dependencies

package/vcs/github/workflows/ci.yml

@@ -30,7 +30,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Pantry
-        uses: pantry-pm/pantry/packages/action@d899150a11cd12157ea360e21f6800a85f900446 # v0.11.71
+        uses: pantry-pm/pantry/packages/action@cdb82193cb344c2b881a88ea79f88243f5522e0f # v0.11.75
         with:
           install: 'false'
 
@@ -63,7 +63,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Pantry
-        uses: pantry-pm/pantry/packages/action@d899150a11cd12157ea360e21f6800a85f900446 # v0.11.71
+        uses: pantry-pm/pantry/packages/action@cdb82193cb344c2b881a88ea79f88243f5522e0f # v0.11.75
         with:
           install: 'false'
 
@@ -99,7 +99,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Pantry
-        uses: pantry-pm/pantry/packages/action@d899150a11cd12157ea360e21f6800a85f900446 # v0.11.71
+        uses: pantry-pm/pantry/packages/action@cdb82193cb344c2b881a88ea79f88243f5522e0f # v0.11.75
         with:
           install: 'false'
 

package/vcs/github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
           fetch-depth: 0
 
       - name: Setup Pantry
-        uses: pantry-pm/pantry/packages/action@d899150a11cd12157ea360e21f6800a85f900446 # v0.11.71
+        uses: pantry-pm/pantry/packages/action@cdb82193cb344c2b881a88ea79f88243f5522e0f # v0.11.75
         with:
           install: 'false'