react-native-audio-browser 0.2.0-next.21 → 0.2.0-next.23

package/lib/typescript/src/types/browser-nodes.d.ts

@@ -23,7 +23,7 @@ export type StyleDisplay = 'list' | 'grid';
  */
 export type ArtworkRendering = 'original' | 'stencil';
 /**
- * The shape a grid tile's artwork is cropped to.
+ * The shape an image or condensed grid tile's artwork is cropped to.
  *
  * - `'rounded-rectangle'` (default) — the standard tile crop.
  * - `'circular'` — the standard presentation for *people* (artists, hosts,
@@ -38,26 +38,31 @@ export type ImageShape = 'circular' | 'rounded-rectangle';
 /**
  * The kind of tile a grid renders.
  *
- * - `'plain'` (default) — artwork tiles with a title.
+ * - `'plain'` (default) — large artwork tiles with a title and subtitle
+ *   below. No shape and no accessory.
+ * - `'image'` — artwork tiles with a title and no subtitle; takes
+ *   {@link TrackStyle.imageShape} and {@link TrackStyle.accessorySymbol}.
+ *   The grid of round tiles for people is `'image'` with
+ *   `imageShape: 'circular'`.
  * - `'card'` — a larger card with title/subtitle and a
  *   {@link TrackStyle.cardTint} color; its image mode is
- *   {@link TrackStyle.cardImage}. Cards have no shape.
- * - `'condensed'` — a denser cell carrying title + subtitle; takes
- *   {@link TrackStyle.imageShape} and {@link TrackStyle.accessorySymbol}
- *   like a plain tile.
+ *   {@link TrackStyle.cardImage}. Cards have no shape and no accessory.
+ * - `'condensed'` — a denser cell carrying title + subtitle beside a small
+ *   image; takes {@link TrackStyle.imageShape} and
+ *   {@link TrackStyle.accessorySymbol}.
  *
  * Element families are mutually exclusive within a container, so this is
  * a container property — hence the enum, and the `grid` prefix.
  */
-export type GridTile = 'plain' | 'card' | 'condensed';
+export type GridTile = 'plain' | 'image' | 'card' | 'condensed';
 /**
  * How a card tile uses its image.
  *
- * - `'normal'` (default) — image above the labels;
- *   {@link TrackStyle.cardTint} colors a gradient behind the labels.
+ * - `'normal'` (default) — a square image inset above the labels;
+ *   {@link TrackStyle.cardTint} colors the whole card.
  * - `'background'` — the image fills the card full-height with the labels
- *   overlaid; `cardTint` becomes the color behind them. Selects the larger
- *   artwork target size.
+ *   overlaid; `cardTint` fades in behind them. Selects the larger artwork
+ *   target size.
  *
  * An enum rather than a boolean: it names the card's image mode and
  * leaves room for future modes.
@@ -120,12 +125,13 @@ export interface TrackStyle {
      */
     artworkRendering?: ArtworkRendering;
     /**
-     * Inherited (`track ?? section ?? page`): the shape a grid tile's
-     * artwork is cropped to — `'circular'` for people, the default
-     * `'rounded-rectangle'` for everything else. Shape follows the item
-     * wherever it travels: a circular artist stays circular in whatever
-     * grid renders it next. Inert where the presentation has no shape
-     * (list rows, pre-26 CarPlay, Android Auto).
+     * Inherited (`track ?? section ?? page`): the shape an image or
+     * condensed grid tile's artwork is cropped to — `'circular'` for people,
+     * the default `'rounded-rectangle'` for everything else. Shape follows
+     * the item wherever it travels: a circular artist stays circular in
+     * whatever shaped grid renders it next. Inert where the presentation has
+     * no shape (list rows, plain and card tiles, pre-26 CarPlay, Android
+     * Auto).
      *
      * @default 'rounded-rectangle'
      *
@@ -135,8 +141,9 @@ export interface TrackStyle {
     /**
      * Inherited (`track ?? section ?? page`): an SF Symbol name drawn as
      * the item's accessory wherever the current presentation supports one —
-     * the trailing edge of a list row, leading the title on an iOS 26 grid
-     * tile (placement is the platform's choice per surface). A resolved
+     * the trailing edge of a list row or an iOS 26 condensed tile, leading
+     * the title on an image tile (placement is the platform's choice per
+     * surface); plain and card tiles have no slot for one. A resolved
      * symbol replaces the derived accessory (the disclosure chevron a
      * browsable row gets); `'none'` clears an inherited value, restoring
      * the derived behavior — inheritance has no other escape, and no SF
@@ -148,8 +155,8 @@ export interface TrackStyle {
     accessorySymbol?: string;
     /**
      * Inherited (`track ?? section ?? page`): the card treatment's tint
-     * color (hex, e.g. `'#1e3a8a'`) — a gradient behind the labels, or the
-     * color behind them when {@link TrackStyle.cardImage} is
+     * color (hex, e.g. `'#1e3a8a'`) — the card's own color, or the color
+     * that fades in behind the labels when {@link TrackStyle.cardImage} is
      * `'background'`. Card-prefixed: inert unless the container renders
      * `gridTile: 'card'`.
      *

package/lib/typescript/src/types/browser-nodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"browser-nodes.d.ts","sourceRoot":"","sources":["../../../../src/types/browser-nodes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"browser-nodes.d.ts","sourceRoot":"","sources":["../../../../src/types/browser-nodes.ts"],"names":[],"mappings":"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"}

package/nitrogen/generated/android/c++/JGridTile.hpp

@@ -45,6 +45,9 @@ namespace margelo::nitro::audiobrowser {
         case GridTile::PLAIN:
           static const auto fieldPLAIN = clazz->getStaticField<JGridTile>("PLAIN");
           return clazz->getStaticFieldValue(fieldPLAIN);
+        case GridTile::IMAGE:
+          static const auto fieldIMAGE = clazz->getStaticField<JGridTile>("IMAGE");
+          return clazz->getStaticFieldValue(fieldIMAGE);
         case GridTile::CARD:
           static const auto fieldCARD = clazz->getStaticField<JGridTile>("CARD");
           return clazz->getStaticFieldValue(fieldCARD);

package/nitrogen/generated/android/kotlin/com/margelo/nitro/audiobrowser/GridTile.kt

@@ -17,8 +17,9 @@ import com.facebook.proguard.annotations.DoNotStrip
 @Keep
 enum class GridTile(@DoNotStrip @Keep val value: Int) {
   PLAIN(0),
-  CARD(1),
-  CONDENSED(2);
+  IMAGE(1),
+  CARD(2),
+  CONDENSED(3);
 
   companion object
 }

package/nitrogen/generated/ios/swift/GridTile.swift

@@ -19,6 +19,8 @@ public extension GridTile {
     switch string {
       case "plain":
         self = .plain
+      case "image":
+        self = .image
       case "card":
         self = .card
       case "condensed":
@@ -35,6 +37,8 @@ public extension GridTile {
     switch self {
       case .plain:
         return "plain"
+      case .image:
+        return "image"
       case .card:
         return "card"
       case .condensed:

package/nitrogen/generated/shared/c++/GridTile.hpp

@@ -30,8 +30,9 @@ namespace margelo::nitro::audiobrowser {
    */
   enum class GridTile {
     PLAIN      SWIFT_NAME(plain) = 0,
-    CARD      SWIFT_NAME(card) = 1,
-    CONDENSED      SWIFT_NAME(condensed) = 2,
+    IMAGE      SWIFT_NAME(image) = 1,
+    CARD      SWIFT_NAME(card) = 2,
+    CONDENSED      SWIFT_NAME(condensed) = 3,
   } CLOSED_ENUM;
 
 } // namespace margelo::nitro::audiobrowser
@@ -45,6 +46,7 @@ namespace margelo::nitro {
       std::string unionValue = JSIConverter<std::string>::fromJSI(runtime, arg);
       switch (hashString(unionValue.c_str(), unionValue.size())) {
         case hashString("plain"): return margelo::nitro::audiobrowser::GridTile::PLAIN;
+        case hashString("image"): return margelo::nitro::audiobrowser::GridTile::IMAGE;
         case hashString("card"): return margelo::nitro::audiobrowser::GridTile::CARD;
         case hashString("condensed"): return margelo::nitro::audiobrowser::GridTile::CONDENSED;
         default: [[unlikely]]
@@ -54,6 +56,7 @@ namespace margelo::nitro {
     static inline jsi::Value toJSI(jsi::Runtime& runtime, margelo::nitro::audiobrowser::GridTile arg) {
       switch (arg) {
         case margelo::nitro::audiobrowser::GridTile::PLAIN: return JSIConverter<std::string>::toJSI(runtime, "plain");
+        case margelo::nitro::audiobrowser::GridTile::IMAGE: return JSIConverter<std::string>::toJSI(runtime, "image");
         case margelo::nitro::audiobrowser::GridTile::CARD: return JSIConverter<std::string>::toJSI(runtime, "card");
         case margelo::nitro::audiobrowser::GridTile::CONDENSED: return JSIConverter<std::string>::toJSI(runtime, "condensed");
         default: [[unlikely]]
@@ -68,6 +71,7 @@ namespace margelo::nitro {
       std::string unionValue = JSIConverter<std::string>::fromJSI(runtime, value);
       switch (hashString(unionValue.c_str(), unionValue.size())) {
         case hashString("plain"):
+        case hashString("image"):
         case hashString("card"):
         case hashString("condensed"):
           return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-audio-browser",
-  "version": "0.2.0-next.21",
+  "version": "0.2.0-next.23",
   "description": "react-native-audio-browser is a react native package built with Nitro",
   "keywords": [
     "react-native",

package/src/types/browser-nodes.ts

@@ -26,7 +26,7 @@ export type StyleDisplay = 'list' | 'grid'
 export type ArtworkRendering = 'original' | 'stencil'
 
 /**
- * The shape a grid tile's artwork is cropped to.
+ * The shape an image or condensed grid tile's artwork is cropped to.
  *
  * - `'rounded-rectangle'` (default) — the standard tile crop.
  * - `'circular'` — the standard presentation for *people* (artists, hosts,
@@ -42,27 +42,32 @@ export type ImageShape = 'circular' | 'rounded-rectangle'
 /**
  * The kind of tile a grid renders.
  *
- * - `'plain'` (default) — artwork tiles with a title.
+ * - `'plain'` (default) — large artwork tiles with a title and subtitle
+ *   below. No shape and no accessory.
+ * - `'image'` — artwork tiles with a title and no subtitle; takes
+ *   {@link TrackStyle.imageShape} and {@link TrackStyle.accessorySymbol}.
+ *   The grid of round tiles for people is `'image'` with
+ *   `imageShape: 'circular'`.
  * - `'card'` — a larger card with title/subtitle and a
  *   {@link TrackStyle.cardTint} color; its image mode is
- *   {@link TrackStyle.cardImage}. Cards have no shape.
- * - `'condensed'` — a denser cell carrying title + subtitle; takes
- *   {@link TrackStyle.imageShape} and {@link TrackStyle.accessorySymbol}
- *   like a plain tile.
+ *   {@link TrackStyle.cardImage}. Cards have no shape and no accessory.
+ * - `'condensed'` — a denser cell carrying title + subtitle beside a small
+ *   image; takes {@link TrackStyle.imageShape} and
+ *   {@link TrackStyle.accessorySymbol}.
  *
  * Element families are mutually exclusive within a container, so this is
  * a container property — hence the enum, and the `grid` prefix.
  */
-export type GridTile = 'plain' | 'card' | 'condensed'
+export type GridTile = 'plain' | 'image' | 'card' | 'condensed'
 
 /**
  * How a card tile uses its image.
  *
- * - `'normal'` (default) — image above the labels;
- *   {@link TrackStyle.cardTint} colors a gradient behind the labels.
+ * - `'normal'` (default) — a square image inset above the labels;
+ *   {@link TrackStyle.cardTint} colors the whole card.
  * - `'background'` — the image fills the card full-height with the labels
- *   overlaid; `cardTint` becomes the color behind them. Selects the larger
- *   artwork target size.
+ *   overlaid; `cardTint` fades in behind them. Selects the larger artwork
+ *   target size.
  *
  * An enum rather than a boolean: it names the card's image mode and
  * leaves room for future modes.
@@ -128,12 +133,13 @@ export interface TrackStyle {
   artworkRendering?: ArtworkRendering
 
   /**
-   * Inherited (`track ?? section ?? page`): the shape a grid tile's
-   * artwork is cropped to — `'circular'` for people, the default
-   * `'rounded-rectangle'` for everything else. Shape follows the item
-   * wherever it travels: a circular artist stays circular in whatever
-   * grid renders it next. Inert where the presentation has no shape
-   * (list rows, pre-26 CarPlay, Android Auto).
+   * Inherited (`track ?? section ?? page`): the shape an image or
+   * condensed grid tile's artwork is cropped to — `'circular'` for people,
+   * the default `'rounded-rectangle'` for everything else. Shape follows
+   * the item wherever it travels: a circular artist stays circular in
+   * whatever shaped grid renders it next. Inert where the presentation has
+   * no shape (list rows, plain and card tiles, pre-26 CarPlay, Android
+   * Auto).
    *
    * @default 'rounded-rectangle'
    *
@@ -144,8 +150,9 @@ export interface TrackStyle {
   /**
    * Inherited (`track ?? section ?? page`): an SF Symbol name drawn as
    * the item's accessory wherever the current presentation supports one —
-   * the trailing edge of a list row, leading the title on an iOS 26 grid
-   * tile (placement is the platform's choice per surface). A resolved
+   * the trailing edge of a list row or an iOS 26 condensed tile, leading
+   * the title on an image tile (placement is the platform's choice per
+   * surface); plain and card tiles have no slot for one. A resolved
    * symbol replaces the derived accessory (the disclosure chevron a
    * browsable row gets); `'none'` clears an inherited value, restoring
    * the derived behavior — inheritance has no other escape, and no SF
@@ -158,8 +165,8 @@ export interface TrackStyle {
 
   /**
    * Inherited (`track ?? section ?? page`): the card treatment's tint
-   * color (hex, e.g. `'#1e3a8a'`) — a gradient behind the labels, or the
-   * color behind them when {@link TrackStyle.cardImage} is
+   * color (hex, e.g. `'#1e3a8a'`) — the card's own color, or the color
+   * that fades in behind the labels when {@link TrackStyle.cardImage} is
    * `'background'`. Card-prefixed: inert unless the container renders
    * `gridTile: 'card'`.
    *

package/website/guide/artwork.md

@@ -238,7 +238,7 @@ A page's [`Section`](/api/types/browser-nodes/#section) can render its tracks as
 }
 ```
 
-Each tile is an ordinary Track, so its `artwork` runs through the same pipeline as any other. Tile styles presume artwork: a track without any renders as a placeholder tile plus its title — the artwork `resolve` hook is the place to supply fallback art. On CarPlay a single-line grid (`gridWrap: false`) shows the tiles that fit (roughly eight, width-dependent; the rest are truncated) and a wrapping grid takes as many lines as it needs on iOS 26+ (rendering as a list before that); Android Auto's grid always wraps, so it renders both identically. See [Browser → Presentation](/guide/browser#presentation) for the full per-surface rundown.
+Each tile is an ordinary Track, so its `artwork` runs through the same pipeline as any other. Tile styles presume artwork: a track without any renders as a placeholder tile plus its title — the artwork `resolve` hook is the place to supply fallback art. On CarPlay a single-line grid (`gridWrap: false`) shows the tiles that fit on one line (seven on a wide screen, or two condensed cells; the rest are truncated) and a wrapping grid takes as many lines as it needs on iOS 26+ (rendering as a list before that); Android Auto's grid always wraps, so it renders both identically. See [Browser → Presentation](/guide/browser#presentation) for the full per-surface rundown.
 
 ## API summary
 

package/website/guide/browser.md

@@ -521,9 +521,9 @@ Presentation lives in `style` blocks, separate from content, plus a few Track fi
 | `style` (same block)                             | a page                   | declaration for the whole page — a section overrides it for its own children      | all                 |
 | `style: { display: 'grid' }`                     | a browsable track        | the layout of the page it opens — Android Auto reads it from the parent item      | Android Auto / AAOS |
 | `style: { artworkRendering: 'stencil' }`         | a track / section / page | tint monochrome artwork to the surface appearance                                 | CarPlay             |
-| `style: { imageShape: 'circular' }`              | a track / section / page | crop grid-tile artwork circular (people) instead of rounded                       | CarPlay (iOS 26+)   |
-| `style: { accessorySymbol: 'lock.fill' }`        | a track / section / page | SF Symbol accessory on rows and tiles (`'none'` restores the derived one)         | CarPlay             |
-| `style: { gridTile: 'card' }`                    | a section / page         | the grid's tile kind: `'plain'` (default), `'card'`, or `'condensed'`             | CarPlay (iOS 26+)   |
+| `style: { imageShape: 'circular' }`              | a track / section / page | crop `'image'` and `'condensed'` tile artwork circular (people)                   | CarPlay (iOS 26+)   |
+| `style: { accessorySymbol: 'lock.fill' }`        | a track / section / page | SF Symbol accessory on rows and on `'image'` / `'condensed'` tiles                | CarPlay             |
+| `style: { gridTile: 'card' }`                    | a section / page         | the grid's tile kind: `'plain'` (default), `'image'`, `'card'`, or `'condensed'`  | CarPlay (iOS 26+)   |
 | `style: { cardTint: '#1e3a8a' }` (+ `cardImage`) | a track / section / page | card color and image mode (`'background'` fills the card full-height)             | CarPlay (iOS 26+)   |
 | `disabled: true`                                 | a track                  | unavailable: never plays; grayed where drawable, hidden elsewhere                 | all                 |
 | `artwork: 'sf:heart.fill'`                       | any item                 | SF Symbol icon (supports `?bg=…&fg=…`)                                            | iOS                 |
@@ -532,11 +532,11 @@ Presentation lives in `style` blocks, separate from content, plus a few Track fi
 | `albumPath` + `resolveAlbumPath`                 | track + config           | make the now-playing album line tappable                                          | CarPlay             |
 
 ::: info Caveats from the table
-**`albumPath` requires `album`** — CarPlay renders the tappable line from the album metadata, so without an `album` there is no line to tap. **\*Layouts render each platform's nearest supported form** — a single-line grid (`gridWrap: false`) on CarPlay shows the tiles that fit (roughly eight, width-dependent) and truncates the rest; a wrapping grid takes as many lines as it needs on iOS 26+ and renders as a list before that. Android Auto's grid always wraps, so it shows more, never less. No car surface scrolls horizontally; an app UI typically renders `gridWrap: false` as a horizontal scroller. Truncation is visual only: tapping a tile queues the whole section (see [Playback behavior](#playback-behavior)). Item properties like `artworkRendering`, `imageShape`, and `accessorySymbol` are inherited — `track ?? section ?? page`, per property — so a section-wide value can be overridden per item; `accessorySymbol: 'none'` is the per-item escape from an inherited symbol, and where the accessory draws is the platform's choice per surface (trailing on list rows, leading the title on tiles). `display` is never inherited: it always describes the children of whatever it's set on. On a page or section it lays out that page or section; on a browsable track it declares the layout of the page that track opens — Android Auto needs it there, or that page renders as a list. `gridWrap` is inert unless `display` is `'grid'`. One AAOS caveat: AOSP-based Automotive units honor only the parent item's `display`, so a page mixing grid and list sections renders uniformly there — see [Android Auto → Browse display](/guide/android-auto#browse-display).
+**`albumPath` requires `album`** — CarPlay renders the tappable line from the album metadata, so without an `album` there is no line to tap. **\*Layouts render each platform's nearest supported form** — a single-line grid (`gridWrap: false`) on CarPlay shows the tiles that fit on one line (seven on a wide screen, or two condensed cells) and truncates the rest; a wrapping grid takes as many lines as it needs on iOS 26+ and renders as a list before that. Android Auto's grid always wraps, so it shows more, never less. No car surface scrolls horizontally; an app UI typically renders `gridWrap: false` as a horizontal scroller. Truncation is visual only: tapping a tile queues the whole section (see [Playback behavior](#playback-behavior)). Item properties like `artworkRendering`, `imageShape`, and `accessorySymbol` are inherited — `track ?? section ?? page`, per property — so a section-wide value can be overridden per item; `accessorySymbol: 'none'` is the per-item escape from an inherited symbol, and where the accessory draws is the platform's choice per surface (trailing on list rows and condensed tiles, leading the title on image tiles). On an iOS 26 grid, which tile draws what is `gridTile`'s choice: `'plain'` has a subtitle but no shape and no accessory, `'image'` has a shape and an accessory but no subtitle, `'condensed'` has all three beside a small image, and `'card'` has a subtitle, a tint and an image mode. `display` is never inherited: it always describes the children of whatever it's set on. On a page or section it lays out that page or section; on a browsable track it declares the layout of the page that track opens — Android Auto needs it there, or that page renders as a list. `gridWrap` is inert unless `display` is `'grid'`. One AAOS caveat: AOSP-based Automotive units honor only the parent item's `display`, so a page mixing grid and list sections renders uniformly there — see [Android Auto → Browse display](/guide/android-auto#browse-display).
 :::
 
 ::: tip Inert declarations are logged in debug builds
-A combination that can never render — `gridWrap` or `gridTile` outside a grid, `cardTint` with no card treatment in scope, `imageShape` on a list or a card, `accessorySymbol` on a card, `display` on a track that renders playable — is inert, not an error, so nothing breaks. In a **debug build**, each one is logged once per page resolution (`Timber` on Android, `os.log` on iOS) naming the section, the effective style, and the fix:
+A combination that can never render — `gridWrap` or `gridTile` outside a grid, `cardTint` with no card treatment in scope, `imageShape` anywhere but an image or condensed grid, `accessorySymbol` on a plain or card grid, `display` on a track that renders playable — is inert, not an error, so nothing breaks. In a **debug build**, each one is logged once per page resolution (`Timber` on Android, `os.log` on iOS) naming the section, the effective style, and the fix:
 
 ```
 Inert style declaration on page '/home': `style.gridWrap` on section 'Featured'
@@ -557,6 +557,8 @@ A property a _surface_ can't draw is never reported — that's the aspirational
   title: 'Home',
   sections: [
     { title: 'Popular', style: { display: 'grid', gridWrap: false }, path: '/popular', children: [...] },
+    // Round tiles for people: the image tile is the one with a shape.
+    { title: 'Artists', style: { display: 'grid', gridTile: 'image', imageShape: 'circular' }, children: [...] },
     { title: 'All stations', children: [...] }
   ]
 }
@@ -567,6 +569,10 @@ A property a _surface_ can't draw is never reported — that's the aspirational
 }
 ```
 
+::: tip See every style rendered
+The example app's **Style Lab** tab draws each `style` declaration on CarPlay: one page per `gridTile` value, plus pages for section headers and for inheritance from page to section to track. Every shelf is titled with the block it renders, so what you see on screen names what to copy. The pages are plain route data in [`style-lab.ts`](https://github.com/radio-garden/react-native-audio-browser/blob/main/apps/example-native/src/utils/style-lab.ts), with a comment on each example saying what it shows.
+:::
+
 Two config-level platform options round it out: `carPlayLoadingTitle` (localized "Loading…" on older CarPlay) and `androidControllerOfflineError`. The album-line tap needs both `albumPath` on the track and a `resolveAlbumPath` callback in the config that maps it to a browse path — see [CarPlay](/guide/carplay) and [Android Auto](/guide/android-auto) for the platform setup these build on.
 
 ## Where to go next

package/website/guide/carplay.md

@@ -601,6 +601,36 @@ Return a browse path to enable the album line for that track, or `undefined` to
 CarPlay renders the tappable album/artist button as a **separate line built from the track's `album`** (visible as the third metadata line, with a chevron). Tracks without an `album` have no string for CarPlay to turn into a button — the artist line alone is never tappable. Set `album` on any track that should offer album-line navigation. See [Now Playing](/guide/now-playing) for the full field-by-surface rendering matrix.
 :::
 
+## Template Depth
+
+CarPlay limits an audio app's template stack to **five templates, the tab bar included** (CarPlay App Programming Guide, p. 15), so the stack is full four pushes in. Now Playing and Up Next each take a slot like any list. A browse tree with a fixed shape (tabs → show → episodes) never gets there; one that can be drilled without end — a place, a place near it, a place near that — does.
+
+At the limit, the library replaces the **top** page with the new one, so a push always lands:
+
+```
+[tabs, A, B, C, D]  + push E
+[tabs, A, B, C, E]
+```
+
+- **Forward never blocks.** A deeper list, Now Playing and Up Next all open at full depth.
+- **Back skips one page.** From `E` it goes to `C`: `D`, the page the listener came from, is the one that was replaced. Below full depth, back works as usual.
+- **The swap is a pop and a push.** CarPlay can't replace a template in place, so the library pops the top one without animation and then pushes the new one.
+
+Each replacement is logged under the `com.audiobrowser` subsystem, category `TemplateStack`:
+
+```
+push at the depth limit: replacing the top, CPListTemplate, with CPListTemplate
+```
+
+To watch for it on the simulator:
+
+```sh
+xcrun simctl spawn booted log stream --level info \
+  --predicate 'subsystem == "com.audiobrowser" AND category == "TemplateStack"'
+```
+
+An `error` line in that category means the pop or the push failed; it names the template involved.
+
 ## Testing
 
 Test your app in the `CarPlay Simulator.app`, which is part of the [Additional Tools for Xcode](https://developer.apple.com/download/all/?q=additional%20tools%20for%20xcode). Siri voice search works there, so you can exercise the full intent flow without a car. CarPlay support on the iOS Simulator can be a little flaky — if something looks broken, retry or fall back to a physical device for final verification.

package/website/guide/track.md

@@ -142,7 +142,7 @@ Optional fields that change how a Track renders on CarPlay / Android Auto. Each
 | ------------------------------------------ | ---------------------------------------------------------------------- | -------------------------- |
 | `style: { display: 'list' \| 'grid' }`     | on a browsable track: the layout of the page it opens                  | Android Auto / AAOS        |
 | `style: { artworkRendering: 'stencil' }`   | tint monochrome artwork to the surface appearance                      | CarPlay                    |
-| `style: { imageShape: 'circular' }`        | crop grid-tile artwork circular (people) instead of rounded            | CarPlay (iOS 26+)          |
+| `style: { imageShape: 'circular' }`        | crop `'image'` and `'condensed'` tile artwork circular (people)        | CarPlay (iOS 26+)          |
 | `style: { accessorySymbol: '…' }`          | SF Symbol accessory; `'none'` restores the derived accessory           | CarPlay                    |
 | `style: { cardTint: '…', cardImage: '…' }` | card color and image mode, when the section renders `gridTile: 'card'` | CarPlay (iOS 26+)          |
 | `disabled`                                 | unavailable: never plays; grayed where drawable, hidden elsewhere      | all                        |